CSS Box Model & Spacing Flashcards

What are the four layers that make up the CSS box model, from innermost to outermost?

Answer: Content, padding, border, margin

The CSS box model consists of content at the center, surrounded by padding, then border, then margin as the outermost layer.

Which value of the `box-sizing` property makes an element's total rendered width include padding and border?

Answer: border-box

`box-sizing: border-box` causes padding and border to be included within the declared width/height, preventing unexpected size increases.

What is the default value of the `box-sizing` property in CSS?

Answer: content-box

By default, `box-sizing: content-box` is applied, meaning padding and border are added on top of the declared width/height.

What does `margin: auto` typically achieve when applied to a block element with a defined width?

Answer: Centers the element horizontally within its container

Setting `margin: auto` on left and right distributes the remaining space equally on both sides, horizontally centering the block element.

When four values are provided to the `margin` shorthand (e.g., `margin: 10px 20px 30px 40px`), in what order are they applied?

Answer: Top, right, bottom, left

CSS shorthand with four values follows the clockwise order: top, right, bottom, left (remember TRBL or 'trouble').

What does `padding: 10px 20px` set for an element?

Answer: Top/bottom = 10px, left/right = 20px

With two values, the first applies to top and bottom, and the second applies to left and right.

Which CSS property controls the space between an element's content area and its border?

Answer: padding

Padding creates space between the content and the border, pushing the border away from the content.