Box sizing in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the CSS property box-sizing control?

It controls how the total width and height of an element are calculated, including content, padding, and border.

beginner

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

The default value is content-box, which means width and height apply only to the content area, excluding padding and border.

intermediate

Explain the difference between content-box and border-box values of box-sizing.

content-box: width and height include only content.<br>border-box: width and height include content, padding, and border.

intermediate

Why is box-sizing: border-box; often recommended for modern web design?

Because it makes sizing easier by including padding and border inside the set width and height, preventing unexpected element size growth.

beginner

How can you apply box-sizing: border-box; to all elements on a webpage?

Use the CSS rule:

*, *::before, *::after { box-sizing: border-box; }

This ensures consistent sizing for all elements and their pseudo-elements.

What part of an element does width control when box-sizing is set to content-box?

A Only the content area

B Content plus padding

C Content, padding, and border

D Content, padding, border, and margin

content-box means width applies only to the content area, excluding padding and border.

If an element has width 200px, padding 20px, and border 5px, what is its total width with box-sizing: border-box;?

A 150px

B 250px

C 230px

D 200px

With border-box, the total width stays 200px including padding and border.

Which CSS selector is best to apply box-sizing: border-box; globally?

A body

B *

C *, *::before, *::after

D html

Using *, *::before, *::after covers all elements and their pseudo-elements.

What happens if you don’t set box-sizing and add padding to an element?

A Element size grows beyond set width/height

B Element size shrinks

C Padding is ignored

D Element size stays the same

With default content-box, padding adds to the element size, making it bigger.

Which box-sizing value makes it easier to create layouts that don’t break when adding padding or borders?

A content-box

B border-box

C padding-box

D margin-box

border-box includes padding and border inside the width and height, simplifying layout.

Describe how the box-sizing property affects the size of an element and why it matters in web design.

Think about how padding and border affect the total size.

Explain how to set up your CSS so that all elements use box-sizing: border-box; and why this is helpful.

Remember the universal selector and pseudo-elements.