CSS box model

An important basic concept in CSS is the box model, see CSS21 Box Model. Each HTML element (ex. <header> or <div>), can be seen as a box. You can see the box-model as a square nephew of the onion. It can also give eye irritation and it is also made out of layers. The nucleus is the content. The content is important, so it is protected and enclosed by the other layers. The padding layer is directly wrapped around the content. The next layer is the border and the most outer layer is the margin. Click here if want to see demonstration of the CSS box model.

You can determine the size of the content with the width and height properties, this creates the content area. The padding area has the same background color as the content area. The size of the padding area can be set via the padding properties. The border has a border style, width and its own color. The margin has no background color, it is transparent. The size of the margin can be set with the margin properties.

.example1 {
  width:            200px;
  height:           200px;
  color:            blue;
  background-color: yellow;
  border:           2px solid black; 
  margin:           2px;
  padding:          3px;
}

The margin, padding and border can be defined per side of the box: Top, Right Bottom and Left site.

.example2 {
  border:  2px solid red;
  margin:  12px 12px 12px 12px;
  padding: 12px 0px 12px 12px; 
}

.example3 {
  border-top:     solid red;
  border-right:   solid blue;
  border-bottom:  solid green;
  border-left:    solid yellow; 
  padding-top:    1em;
  padding-right:  2em;
  padding-bottom: 3em;
  padding-left:   2em;
  padding-top:    1em;
  padding-right:  2em;
  padding-bottom: 3em;
  padding-left:   2em;
}

Each browser has it's own specific default padding and margin settings for HTML-tags, so it has become a practice to set the padding and margin to zero for the document in the CSS. An example code is listed in the box below.

*, html {
  margin:  0;
  padding: 0;
}

CSS-Box model demonstration

You can see the instruction video at youtube by clicking on this text here. To see how it works: Play around!

Legend:
•      - Margin
•      - Padding
•      - Content

In the box below you can see a CSS sample for the box-model example above.