FAQ: The Box Model - Auto

what if we just use margin: auto; ?

Then it will assign all margins as they are specified for that element in the default style sheet.

1 Like

So all the four side of all the margins in the page would have no value and the margin would not be visble?
What I need to know is how would Auto work for the top and bottom margins as well?

The default is no margin for most block elements. Generally speaking, the property, margin: auto is moot since it has no applicable effect, akin to margin: 0.

The property, margin 0 auto ensures there is no top or bottom margin, and the sides share evenly any remaining space in their parent element. When we set the width to less than the parent, the object is centered horizontally.

auto is what gives our element adaptability to varying window widths. The margins get smaller as the width shrinks, and larger as the window expands. Were they fixed margins they would not change.

1 Like

declaring width of 350px and a margin: 0 auto; has no effect on the class selector .pull-quote (as per the exercise). Any idea why that is so ?

Did it center the content horizontally?

I just checked. Yes it did, thanks.

1 Like