Div margin issue

how does <div style=“width:800px; margin:0 auto;”>

why margin:0 auto centers the element ?

its not align = “center” …also margin is not same distance from all sides …its 0 only …so how come the element comes to the center ?

The margins are not the same on each side in that particular CSS declaration. The 0 sets the distance for the top and bottom of the element. The auto means the amount of margin on the sides (left/right) is dynamically/automatically determined by how much space is between the side of the element and the nearest element. The equal amounts of space on each side of the element cause it to be centered.

margin: 0 auto; = margin: 0 auto 0 auto;

This part is not clear. Can you please clarify it ?

The CSS declaration of margin: 0 auto; is an abbreviation for margin: 0 auto 0 auto. When you abbreviate the margin property the first value is for the top and bottom margin widths and the second value is for the left and right margin widths. In the example you are using the zero sets the top and the bottom margins to 0 pixels.

All three of these CSS statements accomplish the exact same thing

margin: 0 auto;
margin: 0 auto 0 auto;
margin-top: 0
margin-right: auto;
margin-bottom: 0;
margin-left: auto;

Beautiful . Thanks.