Lesson 10

Basic layout

Using margins and padding

In this lesson we're going to put our knowledge of the Box Model to the test and use it to centre our main #wrapper (That's div with an ID of "wrapper".)

We use margins to centre block-level elements (structural elements are called block-level elements. Elements like p and span are what's known as inline elements, as they are smaller and less important structurally).

Question for you: what would the margin-left and margin-right of our div need to be to centre the content in the middle of the page?

There's no way we can answer this with an exact number. The margins have to be equal on both sides. Did you get that?

In CSS we use the auto value of the margin property to say to the browser – work it out for us! The browser obliges and makes both margins equal each other.

Play
Go to the next lesson

index.html

style.css

the web page

New Window

Tasks

  • Turn all the margin properties into one line by using CSS shorthand
  • Add a height to the section element
  • Add some padding to the elements section and aside
  • Add box-shadow: 0px 0px 3px #888888; to the #wrapper
Next Lesson
Practical understanding of HTML/CSS layout and positioning using margins, position properties and z-index. Badge

Intermediate Design with CSS

Congratulations! You’ve just earned the Intermediate Design with CSS 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.