CSS Box Model & Spacing Flashcards

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

Answer: 160px

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

Which CSS property adds space between cells in a table?

Answer: border-spacing

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

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

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

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

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

Answer: 130px

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

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

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

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

Which CSS property specifically sets the thickness of an element's border?

Answer: border-width

`border-width` sets the thickness of an element's border, and can be specified in units like px, em, or keywords like thin/medium/thick.

When you set `padding: 0` on an element that previously had padding, what is the immediate visual result?

Answer: The space between the element's content and its border is eliminated

Setting padding to zero removes the internal spacing between the content and the border, making the border sit directly against the content.