Understand the CSS Box Model

Every element has a box

The content area holds text or other content. Padding creates space inside the border. The border surrounds content and padding. Margin creates outside separation from neighboring boxes. When a card feels cramped, decide which layer needs space rather than adding arbitrary widths.

Width depends on box sizing

With the default content-box model, a declared width covers only the content. Padding and borders make the rendered box wider. With border-box, the declared width includes padding and borders. This helps a 100% wide card fit its parent instead of overflowing after padding is added.

Read the example

The preview card uses width: 100% with a maximum width. It can shrink on a narrow screen while remaining comfortable on a large screen. Padding separates the content from the border. Margin provides breathing room outside. A box-sizing rule makes the width calculation easier to predict.

Check the content too

A correct box model does not solve every overflow. A long unbroken URL or fixed-width child can still stretch a layout. Inspect both the parent and the content inside it. Try longer text in the example and check the narrow layout. Prefer flexible dimensions over a collection of device-specific fixed widths.

Read the example

.card {
  box-sizing: border-box;
  width: 100%;
  max-width: 28rem;
  padding: 1.5rem;
  border: 1px solid #cbd5e1;
  margin: 1rem auto;
}

Line-by-line explanation

1. border-box includes padding and border in width.
2. max-width limits growth without preventing shrinking.
3. padding adds inner space; margin adds outer space.

Expected output

A card whose padding stays inside its declared width.

Common mistakes to avoid

• Adding padding to a 100% content-box width
• Using margin to fix cramped inner content
• Ignoring overflow from a child element

Summary & next step

• Can you now identify the four box layers?
• Can you now use border-box for predictable sizing?
• Can you now distinguish padding from margin?

Complete the exercise and pass the knowledge check to complete this lesson. Guest progress stays on this browser and does not sync across devices.

Related BizAIPro tools