出于什么原因，内联和内联块元素无法计算自己的宽度？

Question

为什么内联和内联块元素无法根据内部渲染的文本/内容计算自己的宽度，据我所知，这就是为什么margin：auto不会对它们起作用？

此规范实施背后的设计原因是什么？我真的不明白为什么需要这种行为，如果至少内联块能够这样做似乎更合乎逻辑。

示例：

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>