The CSS Box Model

Take Quiz (1)

The CSS Box Model

Every HTML element is a rectangular box. The box model describes the layers that make up that box:

Content — The actual text or image
Padding — Space between content and border (inside)
Border — A line around the padding
Margin — Space outside the border (between elements)

box-sizing

By default (content-box), padding and border are added to the width. With box-sizing: border-box, the width includes padding and border — almost always the better choice.

Example

/* Reset to border-box globally (recommended) */
*, *::before, *::after {
  box-sizing: border-box;
}

.card {
  width: 300px;
  padding: 24px;         /* space inside */
  border: 2px solid #ddd;
  margin: 16px auto;     /* center + spacing outside */
  background: white;
}

CSS

Full Editor

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned