div with margins & padding that needs to fill its parent

Question

I have a container div (it has both width an height set in pixels).

Is there a way to add a child div that will fill its entire parent but still have margin and or padding ?

suppose the parent div is 200px wide, and 200px high.

if I give the child div a width/height of 100% then it assumes that I mean for the content are to be of size 200px and then if I add padding or margins the size of the child becomes bigger then that of the parent.

I want the child div's content area to be what ever is left after taking out 5px margins on each side...

and please don't tell me to subtract 2*5px from 200px - I know that but I am looking for a better solution.

could it be that css can't handle such a simple task...

Answer 1

Set all elements to have box-sizing as border-box in your stylesheet.

This will sum up the padding of all elements so you don't have to worry about any disruptions if you add any padding.

*{
   box-sizing: border-box;
}

Answer 2

Something like this: http://jsfiddle.net/Rnf82/ ?