0

Why exactly are inline and inline-block elements unable to calculate their own width based on the rendered text/content inside, which as I understand it is why margin:auto won't work on them?

What's the design reason behind this spec implementation? I don't really understand why this behavior is needed, it seems like it would be much more logical if at least inline-block would be able to.

Example:

https://jsfiddle.net/0w9cxn1m/2/

CSS

.area {
background-color:pink;
display:block-flow;
padding:1em;}

p {background-color:red; color:white;}
.inline{display:inline; margin-top:3em; margin-left:3em;}
.inline-block{display:inline-block; margin-top:0em; margin-left:auto;}
.inline-block-3em{display:inline-block; margin-top:0em; margin-left:3em; margin-top:0em;}
.block-centered {display:block; width:300px; margin:0 auto;}

HTML

<div class="area">
<p class="inline">Inline element margin 3em</p>
<p class="inline-block">
Inline-Block with margin-left:auto
</p>
<p class="inline-block-3em">
Inline-Block with margin-left:3em
</p>
<p class="block-centered">
300px wide p block element centered by auto margin calculation
</p>
</div>
Roland
  • 1,908
  • 4
  • 21
  • 34
  • You need to post some code when you ask a question. Can you give some examples of these elements? – Zak Jan 04 '17 at 20:17
  • What do you mean they're *unable to calculate their own width*? – Michael Benjamin Jan 04 '17 at 20:19
  • @Michael_B if I defines the width of a block elm., so it doesn't automatically fill the whole width of the parent cont. and set the margin-left and margin-right to auto, the block element will be centered because it knows the width of the parent element and the width of itself, so it simply fills left and right with the remaining width of the parent elm. (minus itself). Inline elm. and Inline-block element's can't do this, you simply can't simply center them or put them left/right with margin-right:auto, auto in that case will always be 0, presumably because both elm. don't know their width. – Roland Jan 04 '17 at 20:28
  • You should add these details to your question. And by the way, to horizontally center inline-level elements, just use `text-align: center`. – Michael Benjamin Jan 04 '17 at 20:29
  • Thanks Michael! I update the post with some code. text-align:center isn't really what I'm looking for. I know how it behaves, I'm just interested really interested in the reason behind it. Say you have to two inline elements with a background color and you set one to margin:0 auto, it should then be centered between the remaining space of the first inline element and the parent container. would seem like a logical behavior to me at least for inline-block elements, but there must be a good reason why they don't behave like this. – Roland Jan 04 '17 at 20:40
  • 1
    Possible duplicate of [Why centering with margin 0 auto works with display:block but does not work with display:inline-block ?](http://stackoverflow.com/questions/24442060/why-centering-with-margin-0-auto-works-with-displayblock-but-does-not-work-with) – JJJ Jan 04 '17 at 21:04

0 Answers0