The box model, units and colors

Here is a secret that makes CSS click: every element on a page is a rectangular box. Once you see boxes everywhere, spacing and sizing stop being a mystery. In this lesson you will learn the four layers of the box model, the units used to size things, and how to pick colors that work together.

Everything is a box

Open the developer tools and hover over elements: each one is outlined as a rectangle. Even a line of text lives in a box. The box model describes four layers, from the inside out:

1. Content: the text or image itself.
2. Padding: breathing room between the content and the border, inside the box.
3. Border: a line around the padding.
4. Margin: transparent space outside the border, separating the box from its neighbors.

Think of a framed picture on a wall. The picture is the content, the white mat inside the frame is the padding, the frame is the border and the empty wall space around it is the margin.

Padding, border and margin in CSS

.card {
  padding: 1.5rem;
  border: 2px solid #cbd5e1;
  margin: 2rem 0;
}

Shorthand properties accept several values:

margin: 1rem;                 /* all four sides */
margin: 1rem 2rem;            /* top and bottom, then left and right */
margin: 1rem 2rem 3rem;       /* top, left and right, bottom */
margin: 1rem 2rem 3rem 4rem;  /* top, right, bottom, left (clockwise) */

You can also target one side: margin-top, padding-left, border-bottom. The border shorthand takes a width, a style (solid, dashed, dotted…) and a color.

How wide is a box?

By default, width sets the width of the content only. Padding and border are added on top. A box with width: 300px, padding: 20px and a 5px border ends up 350px wide. This surprises everyone at first.

The fix is to change how the box is calculated with box-sizing:

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

With border-box, width includes padding and border: a 300px box stays 300px wide. This single rule, placed at the top of nearly every modern stylesheet, makes layout calculations far more intuitive. Add it to your own file now.

Margin collapsing and centering

When the vertical margins of two block elements touch, they collapse: the space between them is the larger of the two, not the sum. A paragraph with margin-bottom: 20px followed by one with margin-top: 30px is separated by 30 pixels. Horizontal margins never collapse.

To center a block horizontally, give it a width and automatic side margins:

.container {
  max-width: 60rem;
  margin: 0 auto;
}

You will use this “container” pattern in almost every project.

Display: block, inline and inline-block

The display property defines how a box behaves.

• block: occupies a full line; width, height, margin and padding all apply.
• inline: flows within text; width and height are ignored, and vertical margins have no effect.
• inline-block: sits within a line like text but accepts width, height and all spacing.
• none: removes the element from the page entirely, including for screen readers.

The values flex and grid create powerful layouts, which are the subject of chapter 4.

Units

CSS lets you express lengths in several units. The right one depends on what you want.

The big idea is to prefer relative units for anything related to text and spacing. Visitors who increase their browser’s text size, for readability, will then see a layout that adapts. Pixels do not adapt in the same way.

Width, max-width and height

Instead of a rigid width: 800px, use a maximum:

.container {
  width: 90%;
  max-width: 60rem;
  margin: 0 auto;
}
img {
  max-width: 100%;
  height: auto;
}

The container shrinks on small screens and stops growing on large ones. The image never overflows its parent and keeps its proportions. Avoid fixing height on boxes containing text: when the text grows, it overflows. Let content decide the height.

More about colors

You met named colors, hexadecimal and rgb() in the first CSS lesson. Another format is very practical for design: HSL.

color: hsl(173, 80%, 25%);    /* hue, saturation, lightness */
background: hsl(173, 80%, 95%);   /* same hue, much lighter */

The hue is an angle on the color wheel (0 to 360), saturation is the intensity, and lightness goes from black through the pure color to white. Varying only the lightness gives you a family of shades of one hue, ideal for a coherent design. You can add transparency with a fourth value: rgb(0 0 0 / 50%) or hsl(173 80% 25% / 0.5).

Choosing a palette

A beginner-friendly recipe for a portfolio:

• One main color (your brand or accent).
• One darker version for text and a very light version for backgrounds.
• Neutral grays for body text and borders.
• Optionally, one accent for buttons and highlights.

Limit yourself to three or four colors. Consistency looks professional, and too many colors look chaotic.

Contrast matters

Text must stand out sufficiently against its background, or many people cannot read it: people with low vision, people on a phone in sunlight, and everyone tired at the end of the day. Light gray on white is a common failure. We will measure contrast in the accessibility lesson, but start now by choosing a dark text color on a light background, or the opposite.

Practical: styling a project card

.project-card {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.project-card h3 {
  margin-top: 0;
  color: #0f766e;
}

border-radius rounds the corners. Resetting margin-top on the first heading avoids an extra empty space at the top of the card.

Your turn

1. Add the box-sizing: border-box reset at the top of style.css.
2. Create a .container class with a maximum width and automatic side margins, and wrap the content of main in a div class="container" (or apply the class to main itself).
3. Make images fluid with max-width: 100% and height: auto.
4. Style your project article elements as cards, with a white background, a border, rounded corners and padding.
5. Define a palette of three colors for your site and use them consistently.

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

.container {
  width: 90%;
  max-width: 60rem;
  margin: 0 auto;
}

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

article {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}