01 | EVERY BOX HAS LAYERS

You add width: 300px to a project card, then give it padding and a border. Suddenly it takes up more space than you expected. The box model explains why.

For the simple block boxes in this lesson, think from the inside out: content, padding, border, margin.

• Content: the area holding text, images or other content.
• Padding: space between the content and border.
• Border: the line around the padding and content.
• Margin: space outside the border, separating the box from its surroundings.

The box model is a sizing model. It does not mean every element needs a visible border.

02 | PADDING IS INSIDE, MARGIN IS OUTSIDE

.project-card {
  padding: 20px;
  border: 2px solid #24988f;
  margin: 24px;
}

Padding keeps a card’s text away from its border. Margin separates the card from neighbouring content. The border sits between them.

By default, an element’s background paints through its padding to the border area. Margin is outside that background. This helps you see why padding and margin can look different even when they use the same value.

Do not add repeated spaces or empty paragraphs to push content around. Use CSS spacing on the elements.

03 | USE FOUR SIDES OR SHORTHAND

/* One value: all four sides */
padding: 16px;

/* Two values: top/bottom, left/right */
padding: 12px 20px;

/* Three values: top, left/right, bottom */
margin: 8px 16px 24px;

/* Four values: top, right, bottom, left */
margin: 8px 12px 16px 20px;

For four values, go clockwise from the top. Margin and padding use the same shorthand order.

.project-card {
  padding-top: 12px;
  padding-right: 20px;
  padding-bottom: 12px;
  padding-left: 20px;
}

Individual side properties can be clearer when changing just one side. Padding cannot be negative. Margins can be negative, but begin with ordinary positive spacing until you understand the layout.

04 | BORDERS NEED A STYLE

.project-card {
  border: 2px solid #24988f;
  border-radius: 12px;
}

The border shorthand sets width, style and colour. solid creates a continuous line; dashed and dotted produce other styles. A colour and width alone may not produce a visible border when the border style remains none.

border-radius rounds corners. It does not create padding, change the content width or automatically clip every child element to the rounded shape.

Use borders to clarify grouping, alongside headings and spacing. Keep contrast and readability in mind.

05 | CONTENT-BOX: WIDTH DESCRIBES CONTENT

.project-card {
  box-sizing: content-box;
  width: 300px;
  padding: 20px;
  border: 2px solid #24988f;
  margin: 10px;
}

For this fixed-width example, content-box means the specified width is the content width. Padding and borders add to the border-box width.

Content width:                    300px
Left and right padding:       20 + 20px
Left and right border:          2 + 2px
Border-box width:                  344px
Including both horizontal margins: 364px

Margin is never included in the CSS width. Here the sum with margins is useful for spacing calculations, but actual layout can depend on constraints and neighbouring boxes.

06 | BORDER-BOX: INCLUDE PADDING AND BORDER

.project-card {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 2px solid #24988f;
  margin: 10px;
}

With border-box, the specified width includes the padding and border. In this example the border-box width remains 300px.

Specified border-box width:        300px
Subtract horizontal padding:       40px
Subtract horizontal border:         4px
Content width:                     256px
Including both horizontal margins: 320px

Many sites apply border-box consistently:

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

box-sizing does not normally inherit, so this rule targets elements and their pseudo-elements explicitly. It makes common width calculations easier without removing padding or borders.

07 | WIDTH, MAX-WIDTH AND CENTERING

.reading-card {
  box-sizing: border-box;
  width: 100%;
  max-width: 640px;
  padding: 20px;
  border: 2px solid #24988f;
  margin: 24px auto;
}

The card can fill its containing area but is capped at 640px. border-box keeps its padding and border inside that width. In ordinary block layout, auto left and right margins share available space, centring a narrower box.

If the box already fills the available width, there is no spare horizontal space to distribute. margin: auto is not a universal way to centre everything vertically.

text-align: center centres inline content within a box. It does not centre the outer block box itself.

Let text containers grow naturally where possible. Fixed heights can cause text to overflow when content changes or the user enlarges it.

08 | VERTICAL MARGINS CAN COLLAPSE

In ordinary block layout, some vertical margins collapse into one margin. Two adjacent positive margins of 20px and 30px can create a 30px gap rather than 50px.

This does not mean all margins collapse. Horizontal margins do not, and padding never collapses. Parent-child relationships can also produce collapsing margins in appropriate conditions.

Flex and grid layouts have different spacing behaviour, which you will learn next. For now, if a vertical gap surprises you, inspect the boxes rather than assuming every margin simply adds.

09 | TRY IT: MEASURE THE LAYERS

Change the width, padding, border and margin. The preview highlights the margin area in pale pink and padding in pale green. These background colours are demonstration aids; margin itself has no background.

10 | INSPECT AND TEST YOUR SPACING

1. Use developer tools to inspect content, padding, border and margin.
2. Check box-sizing before calculating the total width.
3. Distinguish padding inside a box from margin outside it.
4. Test at a narrow width and with enlarged text.
5. Remove fixed heights that unnecessarily clip content.

Consistent spacing helps people recognise groups of related information. Choose a few useful spacing values and reuse them rather than adding a different number to every element.