1. Technology

Illustrated CSS Box Model


The CSS Box Model is the model that describes how all elements should be placed on a Web page. There are four parts to the box model:

  • content
  • padding
  • border
  • margin

This gallery illustrates how the box model works. You see the different parts of the box model in different colors to make it clearer what is where.

Images 1-5 of 5
Box Model ContentBox Model ContentPadding AddedPadding AddedAdd a BorderAdd a BorderMargins On the EdgeMargins On the Edge
Box Model HackBox Model Hack

©2014 About.com. All rights reserved.