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

Content, spacing, outline, frame

Answer

Text, background, shadow, border

Answer

Body, header, container, wrapper

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

content-box

Answer

padding-box

Answer

full-box

Question 3

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

Accepted Answer

content-box

Answer

border-box

Answer

padding-box

Answer

margin-box

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

Removes all margins from the element

Answer

Adds equal padding on all sides

Answer

Sets margin equal to the viewport width

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

Left, right, top, bottom

Answer

Top, bottom, left, right

Answer

Right, top, left, bottom

Question 6

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

Accepted Answer

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

Answer

All sides = 10px except right = 20px

Answer

Left/right = 10px, top/bottom = 20px

Answer

Top = 10px, all other sides = 20px

Question 7

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

Accepted Answer

padding

Answer

margin

Answer

gap

Answer

spacing