Width, Height, and the box-sizing Property

Lesson 01 introduced the four layers of the box model. Now you need to understand a critical detail about how width and height work — one that trips up nearly every CSS beginner.

The default: content-box sizing

By default, width and height in CSS apply to the content box only — the innermost layer. Padding and border are added on top.

.tour-card {
  width: 300px;
  padding: 1.5rem;    /* 24px each side */
  border: 2px solid #2c4a1e;
}

The actual rendered width of this element is:

2px (border) + 24px (padding) + 300px (content) + 24px (padding) + 2px (border)
= 352px

You declared width: 300px but the element is 352px wide. This is the default content-box model.

The analogy: measuring a box without its packaging. width: 300px is the size of what’s inside — the packaging (padding and border) makes the total larger.

This causes a very common beginner bug: you set a column to 50% width, add some padding, and it suddenly overflows its container because 50% + padding is more than 50%.

Introducing box-sizing: border-box

box-sizing: border-box changes how width and height are calculated. With border-box, the declared width includes padding and border — the content area shrinks to accommodate them.

.tour-card {
  box-sizing: border-box;
  width: 300px;
  padding: 1.5rem;
  border: 2px solid #2c4a1e;
}

Now the element is exactly 300px wide. The content area is 300px - 24px - 24px - 2px - 2px = 248px, but the total rendered size is 300px.

The analogy: measuring the total packaged size. width: 300px is the outside dimension — padding and border fit inside that budget.

The global box-sizing reset

border-box is so universally useful that the modern standard practice is to apply it to every element on the page using a global reset:

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

This should be the very first rule in every stylesheet you write. It applies border-box to every element and their pseudo-elements, making width behave predictably everywhere.

Add this to your STO stylesheet now if it is not already there. It will not visually change anything until you set explicit widths — but it prevents an entire class of layout bugs.

min-width and max-width

Sometimes you want an element to be flexible within a range rather than a fixed size.

max-width — the element will not grow wider than this value, even if it has more space available. Used to keep long text readable on wide screens.

.main-content {
  max-width: 960px;
  margin: 0 auto; /* centers the element horizontally */
}

min-width — the element will not shrink narrower than this value, even if the viewport is smaller. Useful for preventing cards from becoming too narrow to read.

.tour-card {
  min-width: 240px;
  max-width: 400px;
}

min-height and max-height work the same way for the vertical axis.

min-height is particularly useful for hero sections or cards — you want them to be at least a certain height but grow if the content is taller:

.hero {
  min-height: 400px;
}

Exercise

This exercise makes the content-box vs border-box difference visible:

1. In your style.css, find or add a .tour-card rule. Set a fixed width without the global reset:

.tour-card {
  width: 300px;
  padding: 1.5rem;
  border: 2px solid #2c4a1e;
  background-color: #fff;
}

2. Open your tours page in the browser. In DevTools, inspect a .tour-card element. In the Computed tab, look at the box model diagram. Note the total width — it should be 352px, not 300px.

3. Now add the global border-box reset at the very top of your stylesheet:

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

4. Refresh the browser. Inspect the card again. The total width should now be exactly 300px.

5. Also add a max-width to your main content wrapper to keep it centered and readable:

.site-wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

Note: In Module 07 the full STO stylesheet uses .content-wrapper for this pattern instead of .site-wrapper, and the <main> element is not wrapped in a generic site wrapper. The technique is the same — the class name differs to match how M07 applies it selectively on a per-section basis.

Recap

• By default, width and height apply to the content box only — padding and border add to the total size.
• box-sizing: border-box makes width and height include padding and border — the total size equals the declared size.
• Apply box-sizing: border-box globally with *, *::before, *::after { box-sizing: border-box; } at the top of every stylesheet.
• max-width caps an element’s width; min-width sets a minimum. Both work with border-box sizing.
• Use max-width + margin: 0 auto to center a block-level wrapper on the page.

Lesson 03 goes deeper into margin and padding — all the shorthand syntax, centering with margin: auto, and when to use each for spacing on the STO site.