具体高度和宽度，还要使用填充/边距？

Question

所以我正在尝试创建一个A4页面。我们只想说页面的页边距为50px。在我的例子中，整个文档（A4）是300x300像素：

https://jsfiddle.net/pfs01ucw/

我得到的是：

我想要的是这样的：

我只是想设置一个固定容器的宽度和高度，添加一些边距并使包装内部填充整个空间。如果我将padding: 50px添加到#container DIV，则所有边的高度和大小都会增加50像素（基本上会增加400x400像素）。

我如何实现这一目标？

Answer 1

box-sizing: border-box;

  

width和height属性包括内容，填充和边框，但不包括边距。这是文档处于Quirks模式时Internet Explorer使用的框模型。请注意，填充和边框将位于框内部，例如.box {width：350px; border：10px solid black;}导致在浏览器中呈现的宽度为350px的框。内容框不能为负数，并且会被置于0，从而无法使用边框来使元素消失。

     

此处的尺寸计算方法为：width = border + padding +内容宽度，height = border + padding +内容的高度。

MDN - box-sizing - CSS

Fiddle

Answer 2

document.cookie