如何使DIV以5 px的余量占据窗口的总高度和宽度

Question

您好我正在尝试让DIV应用5px边距的总窗口大小，但我的代码中的margin属性存在一些问题..

.outer
{
  background-color:white;
  margin-left:-5px;
  margin-right:-5px;
  margin-top:-5px;
  margin-bottom:-5px;
  height:400px;
  width:100%
}

以上是我的CSS代码..请帮帮我..

此DIV需要占据屏幕/窗口大小的总高度和宽度，保证宽度为5 px。

Answer 1

首先，您可能需要将css元素html和body设置为100％的高度和宽度。由于它们包装整个页面，如果不包含整个页面，页面中的内容就不能包含整个屏幕。

其次，在使用百分比时使用margin并不是一个好主意。如果你适合一个大小等于屏幕的div元素而那么给它一个5px的边距，总宽度将是100％+ 5px。这将使它比屏幕本身更大。为什么不使用padding呢？ （见W3's page on the box model）我的建议是这样的：

html, body, .outer { height: 100%; margin: 0; width: 100%; }
.outer {
 padding: 5px;
}

Answer 2

不要设置宽度，让边距指定宽度。

您需要将body的margin设置为0，然后将-5％更改为5％。

此外，您需要在div中设置一些非零填充。出于某种原因，如果你没有设置填充，顶部会有额外的余量。

试试这个：

body {
    margin: 0;
}
.outer
{
  margin: 5px;
  padding: 1px;
  height:400px;
}