Learning Paths

Concise CSS Box Model Guide

Understanding the Box Model is fundamental to using CSS.  All elements in HTML can be considered a box, whether it’s a <div>, <p> or a <img>.  Boxes have consistent properties that while at first aren’t visible can be adjusted.

Below is a diagram of the CSS box model:

Content: This is where text and images appear.

Padding: The area around the content.  It inherits the same background colour of the content area.

Border: Surrounds the outer edge of any padding and content.  It can be customised to have different styles (dotted, dashed etc), widths and colours.

Margin: Area around the outside of the element’s border.  It is always transparent a therefore can’t be coloured.

An example of the CSS code needed:

div {
width:                   250px;
height:                  100px;
background-color:        red;
border:                  5px solid black;
margin:                  10px;
padding:                 10px;