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