No width specified on child so expands to fill parent width but applied padding and border are moved inwards, happy days.

content

But now for whatever reason I need to specify a width on my child element. Buggery my child has broken out.

content

I could adjust my child width but I need it be a %, this won't work mixed with pixel padding and borders - CSS box-sizing to the rescue!

content

And we're back to the original (desired) outcome but with an explicit % width mixed with pixel based padding and borders. Happy Days!

Now read these for the background...