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 something like width: 100% including everything up to the margin.

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

---

<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.

Answer 2

if your margin is for example 10px you can use

width: calc(100% - 20px); box-sizing: border-box; 

browser support

w3schools.com reference