html / css: why padding enlarge my div

advertisements

i have the following markup:

<div
style="position:absolute;width:100px;height:100px;background-color:#ccc">
    <div style="position:absolute;width:100%;height:100%;background-color:#fcc;padding:50px;">

                TEST

    </div>
</div>

to my understanding the padding in the inner div should only move the position of the text and not enlarge the div itself. how can this be avoided? thanks!


Remove width & height of child div. Padding adds its container's size.