The Box Model

The margin property also lets you center content. However, you must follow a few syntax requirements. Take a look at the following example:

div { margin: 0 auto; }

In the example above, margin: 0 auto; will center the divs in their containing elements. The 0 sets the top and bottom margins to 0 pixels. The auto value instructs the browser to adjust the left and right margins until the element is centered within its containing element.

The div elements in the example above should center within an element that fills the page, but this doesn’t occur. Why?

In order to center an element, a width must be set for that element. Otherwise, the width of the div will be automatically set to the full width of its containing element, like the <body>, for example. It’s not possible to center an element that takes up the full width of the page.

div.headline { width: 400px; margin: 0 auto; }

In the example above, the width of the div is set to 400 pixels, which is less than the width of most screens. This will cause the div to center within a containing element that is greater than 400 pixels wide.



Set the width of the .pull-quote class elements to 350 pixels.


In one line, set the vertical (top and bottom) margins of the .pull-quote class to 0 and the horizontal (left and right) margins to auto.


Set the vertical margins of the #main element to 0, and the horizontal margins to auto.

Folder Icon

Take this course for free

Already have an account?