Snorlax Snorlax - 1 month ago 8
CSS Question

Specific height and width, but also use padding/margin?

So I'm trying to create an A4 page. Let's just say the margin of the page is 50px for now. The whole document (A4) is 300x300 pixels in my example:

https://jsfiddle.net/pfs01ucw/

What I get is this:



What I want is something like this:



I simply want to set a fixed container's width and height, add some margin and make the wrapper inside fill the entire space. If I add

padding: 50px
to the
#container
DIV, the height and size will increase by 50px on all sides (basically making it 400x400 pixels instead).

How do I achieve this?

Answer

box-sizing: border-box;

The width and height properties include the content, the padding and border, but not the margin. This is the box model used by Internet Explorer when the document is in Quirks mode. Note that padding and border will be inside of the box e.g. .box {width: 350px; border: 10px solid black;} leads to a box rendered in the browser of width: 350px. The content box can't be negative and is floored to 0, making it impossible to use border-box to make the element disappear.

Here the dimension is calculated as, width = border + padding + width of the content, and height = border + padding + height of the content.

MDN - box-sizing - CSS

Fiddle