html/css: why does padding enlarge my div

i have the following markup:

<div
style="position:absolute;width:100px;height:100px;background-color:#ccc">     
    <div style="position:absolute;width:100开发者_JAVA百科%;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.

@clamp

you add padding on child div which means it's increase the height & width

example: width=100% +50px +50px ,height=100% +50px +50px

So, if you want to give padding then adjust width & height according to it like example : my div height & width is 200px . Then if i give padding:50px;

then i have to adjust height to height & width is 100px