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

 

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

 

Or as nested boxes:

 

Leave a Reply