CSS CSS Box Model & Spacing 3

Question 1

With `box-sizing: border-box`, `width: 200px`, and `padding: 20px`, what is the width of the content area?

Accepted Answer

160px

Answer

With border-box, the 200px total is shared between padding and content: 200 - 20 (left) - 20 (right) = 160px for the content area.

Question 2

Which CSS property adds space between cells in a table?

Accepted Answer

border-spacing

Answer

`border-spacing` controls the distance between the borders of adjacent table cells when `border-collapse: separate` is set.

Question 3

How does `outline` differ from `border` in the CSS box model?

Accepted Answer

Outline does not occupy space in the layout and does not affect element dimensions

Answer

Unlike border, outline is drawn outside the border edge and does not contribute to the element's size or affect surrounding layout.

Question 4

Using `box-sizing: content-box` (default), `width: 100px`, `padding: 10px`, and `border: 5px solid`, what is the total rendered width?

Accepted Answer

130px

Answer

With content-box, padding and border are added to the declared width: 100 + 10 + 10 + 5 + 5 = 130px total rendered width.

Question 5

What effect does `overflow: hidden` have in relation to the CSS box model?

Accepted Answer

It clips content that extends beyond the element's content box dimensions

Answer

`overflow: hidden` clips any content that exceeds the boundaries of the element's content area, hiding the overflow.

CSS Language Practice Test