html5 Site Icon CSS3 Site Icon CSS Site Icon

CSS 1/2 Basics

Lesson 7 - Understanding The Box Model

Whenever you create a HTML element such as a paragraph using the <p> HTML tag or an image using the <img /> HTML tag, the web browser treats these elements as boxes. The contents of these boxes are surrounded by different properties that make up the 'box model'. In this lesson we investigate the basic properties that make up the 'box model' to see what we can manipulate.

The properties of the CSS box model are best explained through a simple diagram.

The Box Model

notepad

Ok, let's go through this diagram and explain the various properties.

element content - Some text or an image

padding - This is a space between the element content and the border. Think of the padding as the white part of a photo between the picture and the photo edge.

border - Is a line that can be drawn drawn around each edge, or individual edges, of the padding.

margin - A transparent area around around the border.

background-color - Fills all the space from the border inwards with the selected colour. If the border isn't solid, for example the border may be dashed, then space in between the dashes will be filled with the background colour.

Seeing the Box Model In Action

Open up the file with Notepad we created and tested in Lesson 6: Using Fonts.

You saved the file to your computer in the C:\_CSSBasics folder as lesson_6_csspage.html

Copy and paste the following code into the reopened file, overwriting the existing text.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- Our HTML/CSS for Styling Text follows -->
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Doctor - CSS Tutorials - Basic CSS Lesson 7 - The Box Model</title>

<style type="text/css">
/* Set a margin for the document */
body {
  margin: 15px;
}

/* This paragraph will have a dashed black border and yellow background */
#paratext1 {
  border: 1px dashed black;
  background-color: yellow;
}

/* This paragraph will have  a solid red border and olive background */
#paratext2 {
  border: 3px solid black;
  background-color: olive;
}

/* This paragraph will have a solid red border and aqua background */
#paratext3 {
	padding: 15px;
  border: 3px solid red;
  background-color: aqua;
}

/* This image will have 10px padding and a thin black border */
#img1 {
	padding: 10px;
  border: 1px solid black;
}

/* This image will have 5px padding and a thick blue border and yellow background */
#img2 {
	padding: 10px;
  border: 3px solid blue;
  background-color: yellow;
}

/* This image has 10px padding and margin and a thin red border and teal background */
#img3 {
	margin: 10px;
	padding: 10px;
  border: 1px solid red;
  background-color: teal;
}

</style>

</head>
<body>
<h1>The Box Model</h1>
<h2>Looking at Text</h2>
<p id="paratext1">A paragraph with a dashed black border, 
   no padding and a yellow background.</p> 
<p id="paratext2">A paragraph with a thick solid black border, 
   no padding and an olive background.</p> 
<p>A paragraph with no CSS box properties applied.</p> 
<p id="paratext3">A paragraph with a thick solid red border, 
   15 pixel padding and an aqua background.</p> 
<h2>Looking at Images</h2>
<img id="img1" src="http://htmldoctor.info/images/chickenpiesmall.jpg"
    alt="Chicken Pie" />
<img id="img2" src="http://htmldoctor.info/images/chickenpiesmall.jpg"
    alt="Chicken Pie" />
<img id="img3" src="http://htmldoctor.info/images/chickenpiesmall.jpg"
    alt="Chicken Pie" />
</body>
</html>

Save the file in the C:\_CSSBasics folder as lesson_7_csspage.html and close the Notepad.

notepad

Viewing Our Saved File

From the C:\_CSSBasics folder, double click on the saved file and it will appear in your default web browser and look something like the following image.

notepad

Reviewing Our Changes

We will be going over the CSS for the box model in the next 2 lessons for now its enough to understand the spacial impact that the box model properties have by reviewing the text and pictures. Apologies for the colours and borders, they are just there to emphasize the box model areas we are investigating and are not recommended for every day use :).

A point of interest is that the third of the three images has a margin set so this image is displayed higher than the other two because of this.

Lesson 7 Complete

Understanding the box model is fundamental to knowing how and where our text and images will be displayed. Once we have this knowledge mastered we can have confidence in knowing what things will look like on various browsers and work out correct dimensions for our web pages.

Related Tutorials

CSS Basic Tutorials - Lesson 8 - Padding & Margins

CSS Basic Tutorials - Lesson 9 - Borders

CSS 1/2 Intermediate Tutorials - Lesson 2 - A Final Look At The Box Model

What's Next?

We delve deeper into the box model by working with paddings and margins.



Using Fonts  < Prev          Next >>  Paddings & Margins

go to home page Homepage go to top of page Top

CSS properties

The complete set of visual CSS properties from the latest 2.1 Specification.

Click the links for more information on individual properties and their values.