1. Technology
Send to a Friend via Email

CSS Box Model Examples

An Explanation of the Box Model - Visually

The CSS Box Model can be hard to understand. The following paragraphs have different parts of the box model defined with a background image to illuminate the content.

A Plain Paragraph with Background Image

This is the content within the paragraph. It is the defined width of the paragraph.

width: 260px;
height: 260px;
background-image: url(bgimage.jpg);

Set the Padding to 20 px

This is the content within the paragraph. It is the defined width of the paragraph.

width: 260px;
height: 260px;
background-image: url(bgimage.jpg);
padding: 20px;

Set the Border to 20px Gray

This is the content within the paragraph. It is the defined width of the paragraph.

width: 260px;
height: 260px;
background-image: url(bgimage.jpg);
border: solid gray 20px;

Set the Margins to 20 px

This is the content within the paragraph. It is the defined width of the paragraph.

width: 260px;
height: 260px;
background-image: url(bgimage.jpg);
margin: 20px;

Set all Box Model Elements

This is the content within the paragraph. It is the defined width of the paragraph.

width: 260px;
height: 260px;
background-image: url(bgimage.jpg);
margin: 20px; padding: 20px; border: solid gray 20px;
Jennifer Kyrnin

©2014 About.com. All rights reserved.