元素忽略容器元素的填充

【问题标题】：Element ignores padding of container element元素忽略容器元素的填充
【发布时间】：2012-09-05 02:35:15
【问题描述】：

我有以下 HTML/CSS 代码：

<div id="container" style="padding:5px; width:600px;">  
    <div id="panel">
        <a style="padding:5px; color:#ffffff; background-color:#000000;">Page 1</a>

        <!-- Other anchor elements -->
    </div>

    <!-- Other panels -->
</div>

我很难理解为什么#panel 元素可以舒适地放在#container 中；遵守它的填充规则，而#panel 内的锚元素的填充与#container 重叠。有人介意解释为什么会出现这种情况，并在这样做时提出解决办法吗？

【问题讨论】：

标签： html css

【解决方案1】：

我认为这是因为它是一个内联元素，如果您将其显示更改为inline-block，则填充不再重叠。 DEMO

【讨论】：

谢谢，这确实有效，但是您知道为什么内联元素的行为方式与我在 OP 中描述的方式相同吗？
@TheBoss 见this 问题
谢谢。不过，我确实希望这种行为有充分的理由，或者如果有资源，可以解释原因。
@TheBoss 我搜索了 w3c，但一无所获。
我也试过了，但一无所获……可惜我们不知道为什么 W3C 选择以这种方式实现内联元素。