I've been dealing with a frustrating issue all day. I'm trying to adjust the size of a child object to take up 100% of the parent, but with a margin of 10px using the box-sizing method.
I know that I can set the parent's box-sizing property to include padding and then set the child to 100%, but I'm curious if it's possible to do it the other way around.
Here's my current code ... right now, the child box just stretches to fit 100% of the parent without showing the margin:
<div id="Parent">
<div id="Child">
</div>
</div>
And here are my styles:
#Parent
{
height:500px;
width:500px;
background-color:red;
}
#Child
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-top:10px;
margin-left:10px;
width:100%;
height:100%;
background-color:green;
}