The box model comprises the set of properties that 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:
height: The width and height of the content area.
padding: The amount of space between the content area and the border.
border: The thickness and style of the border surrounding the content area and padding.
margin: The amount of space between the border and the outside edge of the element.
Take a look at the image on the right—a visual representation of the box model.
You can open the box model image in a new tab to reference it as you move through the lesson.
Take this course for free