html - 具体的高度和宽度，还要用padding/margin？

Question

所以我正在尝试创建一个 A4 页面。假设页面边距暂时为 50px。在我的示例中，整个文档 (A4) 为 300x300 像素:

https://jsfiddle.net/pfs01ucw/

我得到的是这样的:

我想要的是这样的:

我只是想设置一个固定容器的宽度和高度，添加一些边距并使里面的包装器填满整个空间。如果我将 padding: 50px 添加到 #container DIV，高度和大小将在所有边上增加 50px(基本上变成 400x400 像素)。

我如何实现这一目标？

Answer 1

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