Lesson 9

Box Model

Everything in HTML is like a box

Remember the two new CSS properties, padding and margin, from the previous lesson? They are part of a concept called the "Box Model".

The browser sees every element as a box of content. Boxes have a width and height and an aspect ratio. They can also have a border. Within the box (between the border and the content) we can have some space, and this is called padding. Outside the box we can use margins to push the box away from other elements and position it on the page.

Imagine a framed picture. The space around the frame is the margin. The frame itself is the border. The mount inside the frame is the padding. And the picture itself is the content.

Play
Go to the next lesson

index.html

style.css

the web page

New Window

Tasks

  • Move the box vertically by changing margin-top
  • Move the box horizontally by changing margin-left
  • Change the space between the text and the edge of the box by updating the padding property
  • Make the spacing above the text different by changing the padding-top property
Next Lesson

Further Reading

  • MDN Box Model - More information about the Box Model by the Mozilla Development Network
Practical understanding of  the Box Model: How margins, padding, borders and width affect HTML elements. Badge

Box Model

Congratulations! You’ve just earned the Box Model badge!

If you'd like to send this badge to your Mozilla backpack, just fill out the form below.

This will push your badge to the Mozilla Badge Backpack which is governed by the Mozilla Badge Backpack Terms of Use and Privacy Policy.