CSS Box Model

What is the box model?

The CSS box model explains how an element's visible size and surrounding space are calculated.

.card {
  width: 300px;
  padding: 20px;
  border: 2px solid #cbd5e1;
  margin: 24px;
}

Four layers of a box

• Content — text, image ya actual element content.
• Padding — content aur border ke beech ka inner space.
• Border — padding/content ko surround karne wali boundary.
• Margin — element ke bahar doosre elements se spacing.

Margin
  Border
    Padding
      Content

Content width and height

By default, width and height apply to the content box when box-sizing: content-box is used.

.box {
  width: 300px;
  height: 120px;
  background-color: #eaf3ff;
}

Padding

Padding creates space inside the border. The element's background extends through the padding area.

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

.card-short {
  padding: 12px 20px;
}

Border

A border surrounds the padding and content. Border width contributes to the element's total outer size in the default box model.

.card {
  border: 1px solid #dbe4ee;
  border-radius: 12px;
}

The shorthand commonly combines border width, style and color.

Margin

Margin creates space outside the border and separates an element from nearby elements.

.section {
  margin-top: 40px;
  margin-bottom: 40px;
}

.card {
  margin: 0 auto;
}

How total size is calculated

With the default content-box, declared width does not include padding and border.

.box {
  width: 300px;
  padding: 20px;
  border: 2px solid;
}

Total horizontal rendered width becomes 300 + 40 + 4 = 344px, excluding margins.

box-sizing: border-box

border-box makes the declared width include content, padding and border. This usually makes layout sizing easier to reason about.

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

.card {
  width: 300px;
  padding: 20px;
  border: 2px solid #cbd5e1;
}

Margin and padding shorthand

/* all sides */
padding: 16px;

/* vertical | horizontal */
padding: 12px 20px;

/* top | horizontal | bottom */
margin: 10px 20px 30px;

/* top | right | bottom | left */
margin: 10px 20px 30px 40px;

Margin collapsing

Vertical margins between normal block elements can sometimes collapse into a single margin instead of adding together.

.first {
  margin-bottom: 30px;
}

.second {
  margin-top: 20px;
}

In a common normal-flow case, the vertical gap may be 30px rather than 50px.

Overflow and oversized content

If content is larger than the available box, overflow can happen.

.panel {
  max-width: 420px;
  overflow-wrap: anywhere;
}

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

Responsive sizing and content-aware constraints help prevent boxes from breaking the layout.

Inspect the box model in DevTools

Browser DevTools can show content size, padding, border and margin visually. Inspect an element and check the computed/layout panel.

Best practices

• Project start me predictable sizing ke liye global border-box reset consider karo.
• Spacing system consistent rakho instead of random values everywhere.
• Fixed heights ko carefully use karo.
• Responsive elements ke liye max-width useful hota hai.
• Margin outer spacing ke liye aur padding inner spacing ke liye use karo.
• DevTools me actual computed box inspect karo.

Common beginner mistakes

• width: 300px ko final total width samajhna while using default content-box.
• Margin aur padding ka purpose mix karna.
• Every element ko fixed height dena.
• Box-sizing difference ignore karna.
• Four-value shorthand ka order confuse karna.
• Unexpected vertical gap me margin collapse check na karna.