The box model comprises the set of properties which define parts of an element that take up space on a web page. The model includes the content area’s size (width and height) and the element’s padding, border, and margin. The properties include:
- Width and height — specifies the width and height of the content area.
- Padding — specifies the amount of space between the content area and the border.
- Border — specifies the thickness and style of the border surrounding the content area and padding.
- Margin — specifies the amount of space between the border and the outside edge of the element.
The image to the right is a visual representation of the box model.
Open the box model image in a new tab so you can reference the box model as you move through the lesson.