Box Model

How elements are laid out.

The CSS Box Model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. Understanding the box model is crucial for controlling layout and spacing.

Interactive Lab

Margin (px)

20px

Border (px)

5px

Padding (px)

20px

MARGIN

BORDER

PADDING

CONTENT

128x80

.box { 
  width: 128px;
  height: 80px;
  margin: 20px;
  border: 5px solid;
  padding: 20px;
}

Live Example & Code

Preview Output

<div class="box">
  I am a box!
</div>

<style>
.box {
  width: 200px;
  padding: 20px;
  border: 5px solid green;
  margin: 20px;
  background: lightgray;
}
</style>

Open in Playground