In this lesson, we covered the four properties of the box model: height and width, padding, borders, and margins. Understanding the box model is an important step towards learning more advanced HTML and CSS topics. Let’s take a minute to review what you learned:

• The box model comprises a set of properties used to create space around and between HTML elements.
• The height and width of a content area can be set in pixels or percentages.
• Borders surround the content area and padding of an element. The color, style, and thickness of a border can be set with CSS properties.
• Padding is the space between the content area and the border. It can be set in pixels or percent.
• Margin is the amount of spacing outside of an element’s border.
• Horizontal margins add, so the total space between the borders of adjacent elements is equal to the sum of the right margin of one element and the left margin of the adjacent element.
• Vertical margins collapse, so the space between vertically adjacent elements is equal to the larger margin.
• margin: 0 auto horizontally centers an element inside of its parent content area, if it has a width.
• The overflow property can be set to display, hide, or scroll, and dictates how HTML will render content that overflows its parent’s content area.
• The visibility property can hide or show elements.