~ Contribute

Suggest a correction or improvement. The author reviews it before it goes live.

Comment0 / 300

en/tutorials/css/3css-box-model

# 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:

```css
/* 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:

```css
/* 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:

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

## Margin

Space outside the element:

```css
/* 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:

```css
/* 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:

```css
/* 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

```css
.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;
}
```

```html
<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):

```css
/* 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

No changes yet

cancel