Html 元素忽略容器元素的填充

我有以下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>

第1页

---

我很难理解为什么

#panel

元素舒适地位于

#容器中；遵守它的填充规则，而
#面板
中锚元素的填充与
#容器
重叠。有人能解释一下为什么会出现这种情况吗？在这样做的时候，也许会提出一个解决方案？
我认为，因为这是一个内联元素，所以如果将其显示更改为
内联块
，则填充不再重叠
 谢谢，这确实有效，但是你知道为什么内联元素的行为会像我在OP中描述的那样吗？@老板看问题谢谢。我真希望这种行为有一个好的理由，或者如果有，有一个资源来解释原因。@TheBoss我搜索了w3c，但什么也没找到。我也试过，但什么也没找到。。。令人遗憾的是，我们不知道为什么W3C选择以这种方式实现内联元素。