元素忽略容器元素的填充

Question

我有以下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重叠。有人会介意解释为什么会这样，并且这样做，或许建议修复？

Answer 1

我认为因为它会出现内联元素，如果将其显示更改为inline-block，则填充不再重叠。 DEMO

Answer 2

@Musa是正确的，元素锚元素需要设置为display:inline block;或display:block并设置宽度。