CSS CSS Box Model & Spacing

Question 1

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

Accepted Answer

Content, padding, border, margin

Answer

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

Question 2

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

Accepted Answer

border-box

Answer

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

Question 3

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

Accepted Answer

content-box

Answer

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

Question 4

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

Accepted Answer

Centers the element horizontally within its container

Answer

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

Question 5

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

Accepted Answer

Top, right, bottom, left

Answer

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

CSS Language Practice Test