Tutorials
CSS
CSS Box Model

CSS Box Model

Every element on a web page is a rectangular box. The CSS box model describes how these boxes are sized and how they interact with each other. Understanding the box model is crucial for creating layouts that look right.

What is the Box Model?

The box model consists of four parts: content, padding, border, and margin. Each part adds to the total size of the element.

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
}

Content Area

The content area is where your text, images, or other content appears. The width and height properties set the size of this area.

.content-box {
  width: 300px;
  height: 200px;
}

Padding

Padding is the space between the content and the border. It adds breathing room around your content.

.padded-box {
  padding: 20px; /* 20px on all sides */
  padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 10px;
  padding-left: 15px;
}

.shorthand-padding {
  padding: 10px 15px; /* top/bottom 10px, left/right 15px */
  padding: 10px 15px 20px; /* top 10px, left/right 15px, bottom 20px */
  padding: 10px 15px 20px 25px; /* top, right, bottom, left */
}

Border

The border surrounds the padding and content. You can control its width, style, and color.

.bordered-box {
  border-width: 2px;
  border-style: solid;
  border-color: #000;
}

.border-shorthand {
  border: 2px solid #000; /* width style color */
}

.border-sides {
  border-top: 1px solid red;
  border-right: 2px dashed blue;
  border-bottom: 3px dotted green;
  border-left: 4px double purple;
}

Margin

Margin is the space outside the border. It creates space between elements.

.margined-box {
  margin: 20px; /* Same as padding shorthand */
  margin-top: 10px;
  margin-right: 15px;
  margin-bottom: 10px;
  margin-left: 15px;
}

Box Sizing

By default, width and height set the content area size. Use box-sizing to change this behavior.

/* Default: content-box */
.element {
  box-sizing: content-box; /* width = content width */
}

/* Border-box: width includes padding and border */
.element {
  box-sizing: border-box; /* width = content + padding + border */
}

Total Element Size

Understanding how elements are sized is important for layout.

/* With content-box (default) */
.element {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
  /* Total width: 200 + 20*2 + 5*2 + 10*2 = 270px */
}

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

Practical Examples

Card Component

Create a card with proper spacing.

.card {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin: 10px;
}

.card-title {
  margin-top: 0;
  margin-bottom: 10px;
}

.card-content {
  margin-bottom: 15px;
}

Button with Padding

Make buttons look good with padding.

.button {
  box-sizing: border-box;
  padding: 10px 20px;
  border: 2px solid #007bff;
  background: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 4px;
}

.button:hover {
  background: #0056b3;
}

Image with Border

Add borders to images without affecting layout.

.image-border {
  box-sizing: border-box;
  border: 5px solid #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

Margin Collapsing

Adjacent margins can collapse into a single margin. This happens with vertical margins.

/* These margins collapse */
.top-element {
  margin-bottom: 20px;
}

.bottom-element {
  margin-top: 30px;
}
/* Result: 30px gap (larger margin wins) */

Negative Margins

Negative margins can pull elements closer or create overlaps.

.pull-left {
  margin-left: -20px; /* Pulls element 20px to the left */
}

.overlap {
  margin-top: -10px; /* Overlaps with element above */
}

Browser DevTools

Use browser developer tools to inspect the box model of any element. Right-click on an element and select “Inspect” to see padding, border, and margin visually.

Best Practices

  1. Use box-sizing: border-box on all elements for predictable sizing
  2. Avoid negative margins unless you know what you’re doing
  3. Use consistent spacing units (rem, em, px)
  4. Test your layouts on different screen sizes
  5. Use the box model to debug layout issues

Common Issues

  • Unexpected spacing: Check for margin collapse
  • Elements too wide: Use box-sizing: border-box
  • Content overflow: Adjust padding or use overflow property
  • Inconsistent spacing: Use a spacing system with variables

External Resources:

Related Tutorials:

Last updated on
CSS VariablesCSS Transforms