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:

<!DOCTYPE html>
		<meta name="author" content="Derrick Robinson" />
		<link rel="stylesheet" type="text/css" href="style.css" />
		<title>Document Title</title>
		<h1>A very simple page</h1>
			<li>My first list item</li>
			<li>Here's the second</li>
			<li>Finally the third</li>
		<h2>A smaller heading</h2>
		<p><em><strong>Fantastic content!</strong></em></p>
		<p>Not so fantastic content.</p>


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


Or as nested boxes:


Leave a Reply