Box Model

In CSS a page consists of a set of elements rendered as rectangular boxes, nested inside one another.


Each element is represented as a box that consists of:

  • margins, outside the border
  • border
  • padding, inside the border
  • content, at the centre of the box


Notice the major bug (/headache) in the Internet Explorer box model. This causes a huge issue with developers having to code either separate stylesheets for IE or creating hacks to overcome IE's problems.



Given the following simple HTML:


The above html elements can be represented as a tree structure as follows:


Or as nested boxes:


Leave a Reply