Recap

In the 3rd CSS lesson, we learned about the box model.

And we learned that:

• We can think of content as an image.
• We set the size of the content using height and width.
• We specify sizes in pixels (px)
• We can think of the border as a frame around the image.
• We create a border using the following format: border: width style color;
• We specify the border radius (border-radius) in pixels. More pixels means a larger radius.
• We can think of padding as the space between the content of the image and its border.
• We can create padding either with the same size on all sides padding: 10px or individually on each side:

padding-left: 10px;
padding-right: 5px;
padding-top: 0px;
padding-bottom: 15px;

• We can think of margin as the space between the borders of adjacent images.
• Similar to padding, we can create margin with the same size on all sides margin: 10px or individually on each side:

margin-left: 10px;
margin-right: 5px;
margin-top: 0px;
margin-bottom: 15px;

• Overflow occurs when an element is larger than its parent.
• We can handle overflow in the following ways: hide (hidden), add scroll (scroll), or show (visible), which is the default value.