box-sizing and controlling element size

In the previous lesson, width: 300px produced a 344px box because padding and border were added on top. The box-sizing property changes that rule, and almost every modern stylesheet switches it on the first line.

content-box versus border-box

box-sizing decides which part of the box width and height describe.

.content-box {
    box-sizing: content-box;  /* the default */
    width: 300px;
    padding: 20px;
    border: 2px solid;
    /* visible width: 300 + 40 + 4 = 344px */
}

.border-box {
    box-sizing: border-box;
    width: 300px;
    padding: 20px;
    border: 2px solid;
    /* visible width: 300px; content shrinks to 256px */
}

With border-box, the number you write is the size you see. That makes layouts far easier to reason about, especially with percentages:

.column {
    box-sizing: border-box;
    width: 50%;
    padding: 1.5rem;   /* still exactly half the row */
}

With content-box, two of those columns would be 50% plus padding each, more than 100% in total, and the second would wrap below the first.

The common reset

Most projects apply border-box to every element:

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

The ::before and ::after selectors cover generated content, which you will meet in the pseudo-elements lesson. Put this rule at the very top of your stylesheet.

width and height

Block elements such as <div>, <p> and <section> fill the available width by default. Their height grows to fit their content. In most cases that is exactly what you want, so leave both alone.

/* Fragile */
.card {
    height: 200px;
}

/* Robust */
.card {
    min-height: 200px;
}

Min and max sizes

Four properties set limits instead of exact sizes:

Combine a flexible width with a limit and the element adapts to the space it gets:

.page {
    width: 100%;
    max-width: 70rem;
    margin-inline: auto;
    padding-inline: 1rem;
}

On a phone the page fills the screen. On a large monitor it stops at 70rem and centres. No media query needed.

When limits conflict, min-width beats max-width, and both beat width.

Readable text columns

.article {
    max-width: 65ch;
}

Long lines are tiring to read. Capping the width in ch keeps lines a comfortable length whatever the font size.

Images that never overflow

img {
    max-width: 100%;
    height: auto;
}

An image larger than its container is scaled down to fit; a smaller one keeps its natural size. height: auto keeps the proportions correct. This rule belongs in every base stylesheet. Serving the right image file for each screen size is covered in the Responsive Web Design course.

Buttons with a minimum target size

.button {
    min-height: 2.75rem;
    min-width: 2.75rem;
    padding: 0.5rem 1rem;
}

The button grows with its label, but never shrinks below a comfortable size for fingers and pointers.

Sizing keywords

width also accepts keywords that size the box from its content:

.tag {
    width: fit-content;   /* as wide as the content, but no wider than available */
}

• min-content is the narrowest the content can go, usually the longest word.
• max-content is the width the content wants with no wrapping.
• fit-content is max-content, but capped at the available space.

These become especially useful in Grid, which you will see in the subgrid and intrinsic layout lesson.

aspect-ratio

aspect-ratio keeps a box in proportion as its width changes:

.video-frame {
    width: 100%;
    aspect-ratio: 16 / 9;
}

.avatar {
    width: 4rem;
    aspect-ratio: 1;      /* square */
    border-radius: 50%;
}

Set one dimension and the browser works out the other. If the content is taller than the ratio allows, the box grows by default rather than cutting it off.

A starter base stylesheet

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

body {
    margin: 0;
    font-family: system-ui, sans-serif;
    line-height: 1.5;
}

img,
svg,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

button,
input,
select,
textarea {
    font: inherit;
}

You will build on this throughout the course.

Debugging size problems

• Element wider than expected: inspect it and check the box diagram in the Computed tab. If the padding is outside the width, box-sizing is still content-box.
• Horizontal scrollbar on the page: the cause is usually one element wider than the viewport, often with a fixed width in px or width: 100vw. Temporarily add * { outline: 1px solid red; } to see every box's edges.
• Text spilling out of a box: look for a fixed height and change it to min-height.

Summary

• content-box (the default) adds padding and border to width; border-box includes them.
• Apply box-sizing: border-box to every element with the universal reset.
• Let height follow content; use min-height instead of height for text containers.
• Combine flexible widths with max-width, and give images max-width: 100%.
• fit-content, min-content, max-content and aspect-ratio size boxes from content or proportion.