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;Jennifer Kyrnin
height: 260px;
background-image: url(bgimage.jpg);
margin: 20px; padding: 20px; border: solid gray 20px;
