Menu
If I set the CSS margin properties of a div like so:
div { margin-left: auto; margin-right: auto; }
I get a div which is centered horizontally in the page, like so.
However, if I change the CSS to this:
div { margin-top: auto; margin-bottom: auto; }
my div is not vertically centered. I don't need to know a workaround (plenty of solutions are available) but I would like to know the reason for this behaviour. Why don't margin-top and margin-bottom work in the same way? What am I missing?
336
margin: auto; , it will not work. This is because by default the block-level elements such as a div, p, list, etc take up the full width of its parent element, and no space is left to adjust the element horizontally. So, the very first thing you need to check is whether you have set the width of the element or not.
This issue is known as Margin Collapse and happens sometimes between top and bottom margins on block elements. That's why the margin doesn't work on the p tag. To make it work here an option is to use padding-top on the p tag. And on the a tag the margin doesn't work because it's an inline element.
Two Values The syntax for the CSS margin property (with 2 values) is: margin: top_bottom left_right; When two values are provided, the first value will apply to the top and bottom of the element. The second value will apply to the left and right sides of the element.
The auto Value You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins.
The short answer is the spec says so.
10.6.2 Inline replaced elements, block-level replaced elements in normal flow, 'inline-block' replaced elements in normal flow and floating replaced elements
If 'margin-top', or 'margin-bottom' are 'auto', their used value is 0.
http://www.w3.org/TR/CSS2/visudet.html#Computing_heights_and_margins
126
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
