CSS Box Model

Every HTML element is a box. The box model describes how content, padding, border, and margin work together.

The Four Parts

┌─────────────────────────────────┐
│           MARGIN                │
│  ┌───────────────────────────┐  │
│  │         BORDER            │  │
│  │  ┌─────────────────────┐  │  │
│  │  │       PADDING       │  │  │
│  │  │  ┌───────────────┐  │  │  │
│  │  │  │    CONTENT    │  │  │  │
│  │  │  └───────────────┘  │  │  │
│  │  └─────────────────────┘  │  │
│  └───────────────────────────┘  │
└─────────────────────────────────┘

• Content — Text, images, etc.
• Padding — Space between content and border
• Border — Line around the element
• Margin — Space outside the border

Box Sizing

By default, width/height only includes content:

/* Default: content-box */
.element {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  /* Total width: 200 + 20 + 20 + 5 + 5 = 250px */
}

With border-box, width/height includes padding and border:

/* border-box (recommended) */
.element {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  /* Total width: 200px (padding and border included) */
}

Universal Reset

Always reset box-sizing:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Margin

Space outside the element:

/* All sides */
margin: 10px;

/* Top, right, bottom, left */
margin: 10px 20px 10px 20px;

/* Top, horizontal, bottom */
margin: 10px 20px 10px;

/* Vertical, horizontal */
margin: 10px 20px;

/* Center horizontally */
margin: 0 auto;

/* Negative margin (pull element) */
margin-top: -20px;

Padding

Space inside the element:

/* All sides */
padding: 10px;

/* Top, right, bottom, left */
padding: 10px 20px 10px 20px;

/* Top, horizontal, bottom */
padding: 10px 20px 10px;

/* Vertical, horizontal */
padding: 10px 20px;

Border

Line around the element:

/* Basic border */
border: 1px solid black;

/* Individual sides */
border-top: 2px dashed red;
border-right: 3px double blue;
border-bottom: 1px solid green;
border-left: 5px groove gray;

/* Border radius (rounded corners) */
border-radius: 10px;

/* Different radius for each corner */
border-radius: 10px 20px 30px 40px;

/* Circle (50%) */
border-radius: 50%;

Complete Example

.card {
  width: 300px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
  margin: 20px auto;
  background-color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.card-title {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.card-content {
  padding: 15px;
  border-left: 3px solid #3498db;
  margin-bottom: 20px;
}

.card-button {
  padding: 10px 20px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 5px;
  margin: 0;
  cursor: pointer;
}

<div class="card">
  <h2 class="card-title">Card Title</h2>
  <p class="card-content">Card content goes here.</p>
  <button class="card-button">Click Me</button>
</div>

Collapsing Margins

Vertical margins collapse (only the larger margin is used):

/* These margins collapse */
h1 {
  margin-bottom: 20px;
}

p {
  margin-top: 30px;
}

/* Only 30px gap, not 50px */

To prevent collapsing:

• Use padding instead
• Add border or padding to parent
• Use Flexbox or Grid

Best Practices

1. Use border-box — Makes layout predictable
2. Use margin: 0 auto — Centers elements
3. Use padding for internal spacing — Not margin
4. Reset margins on body — Prevents unexpected gaps
5. Use shorthand — margin: 10px 20px is cleaner

Common Mistakes

1. Forgetting box-sizing — Width calculations break
2. Collapsing margins — Unexpected gaps
3. Using margin on inline elements — Only works on block elements
4. Not resetting margins — Browser defaults cause issues
5. Overusing negative margin — Can break layouts