Learn
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 todisplay
,hide
, orscroll
, and dictates how HTML will render content that overflows its parent’s content area. - The
visibility
property can hide or show elements.
Instructions
Make some adjustments to the code in the code editor. See if you can improve the appearance of the page by changing the following properties:
width
height
padding
border
margin
overflow
Take this course for free
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.