Why won't the margin be auto?

when I set the Display of my Div to Inline-block, my margin stops being auto:

div { width:120px; height:50px; background-color:#bcd2ee; border:2px solid #6495ed; border-radius:10px; text-align:center; display:inline-block; margin:auto; }

can’t inline-bock display and auto margin be used together?

Answer 523e44af548c35e2a6001654

1 vote

Permalink

Inline-block and inline set the div next to the preceding element (horizontal placement). Block display sets the div below the element (vertical placement). This is, of course, before applying any CSS to alter the position.

Auto margins set the div horizontally in the center (horizontal placement). So, if you use inline-block and auto margins at the same time, you are trying to place the div horizontally in two different ways that clash with each other.

This is why you can use block display and auto margins together; block is vertical and auto margins are horizontal.

points

Submitted by Adam Davies

over 10 years

Answer 5578418e937676dc380002c1

0 votes

Permalink

For elements with property display: inline-block; “A computed value of ‘auto’ for ‘margin-left’ or ‘margin-right’ becomes a used value of ‘0’. “ PS. by WC3 official specification.

points