css - Why centering with margin 0 auto works with display:block but does not work with display:inline-block ?

Question

Just a quick question that was bugging my mind : Why centering with

margin:0 auto

does work fine with

display:block

but does not center a div when display is set to

display:inline-block

Thanks for answers

Answer 1

My understanding is as follows (though I am happy to be corrected).

• Inline elements do not have a width property, and so the "auto" cannot be calculated.
• Block elements have a width property, so the width of the "auto" can be calculated.
• Inline-block elements have an outside which acts inline, but an inside which acts like a block. As such, the width set acts more like the width of a word in an inline element.