Element ignores padding of container element

Question

I have the following HTML/CSS code:

<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>

I struggle to understand why the #panel element sits comfortably within the #container; obeying the padding rules of it, whereas padding of the anchor element within the #panel overlaps the #container. Would anyone mind explaining why this is the case, and in doing so, perhaps suggest a fix?

Answer 1

I think because its an inline element this occurs, if you change its display to inline-block the padding no longer overlaps. DEMO