Including margin for width and height

by

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;
}

<div id="parent">
   <div id="child"></div>
</div>

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

Leave a Comment