CSS Fill parent div 100% cleanly

Question

I want to be able to fill a parent's div exactly 100% with a child span. The problem is the span that I want to fill it with is themed with themeroller and it has varying padding, and margins. So I cannot hard code any sizes for the height of the span.

If I try to set the height of the span to 100% then it actually goes over and fills more like 100% + 6 pixels for this theme (but the over amount varies by theme). How do you make it so no matter what size the padding/margins for the span it will only ever fill 100% of the parent div?

Thank you very much for the help.

Answer 1

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;    
box-sizing: border-box;

See http://jsfiddle.net/mbB8t/2/

Clarified: Works for all modern browsers (IE8+).

Answer 2

To make this work, you have to calculate the paddings and margins value by adding the 2xwidth of the span plus the height. then you can know what values to use for span to make it fill the parent div. check the examples here http://www.phcityonweb.com/tutorial/css-programming-lessons/margin-padding