Including margin for width and height

Question

I want box width and height to include all of the content, padding, border width, and margin by default. Is there a way to do this? Especially, I want to be able to specify

Answer 1

This is a vague question, but I'll answer the best I can.

Margin, by definition, is the area around the outside of your box; meaning there's no way to include margins inside of your div.

If you would like more padding on the inside of your box, but you don't want the box to resize, then use: box-sizing:content-box;
Or if you would like to include padding and the border, use: box-sizing:border-box;

A workable solution that preserves the size of your divs and removes overflow would look something like this:

#parent{
    box-sizing:border-box;
    width:100%;
    height:200px;
    padding:2em;
}
#child{
    box-sizing:border-box;
    width:100%;
    height:100%;
    padding:1em;
}

---

Just place the div you want to give margins to inside of another div that has padding. Thus creating faux margins.