logo标签列表

CSS边距如何推动body元素

htmlcsslayoutmargins
7

我正在为一个 div 元素设置边距，但是 body 元素也得到了该边距。

请考虑以下代码：

<!-- HTML -->
<body>
  <div>
  </div>
</body>

<!-- CSS -->
<style>
  html,body {
   height:100%;
   margin:0;
   padding:0;
   outline:1px solid blue;
  }

 div {
   margin:20px;
   outline:1px solid red;
 }

</style>

这是结果和问题: http://i54.tinypic.com/29ve1zl.jpg 到目前为止，我通过在body元素中添加border:1px solid transparent;属性来解决问题。这会破坏100%的高度，因为由于1px边框出现了滚动条。为什么会发生这种情况？
可能的解决方案(感谢帮助)：添加padding-top:1px和margin-top:-1px，这样就不会因滚动条而破坏100%的高度，并且避免了边距折叠。
3
最佳解决方案可能是在父级元素上添加 overflow:auto;，就像 @Chris Nicholson 提供的链接中所述。 - lejahmie
3个回答
3
2
这是由于所谓的折叠边距效应引起的。
某些相邻的边距会合并成一个单一的边距。这些边距被称为“折叠”。如果没有非空内容、填充或边框区域或间隙将它们分开，那么边距就是相邻的。 http://www.w3.org/TR/css3-box/#collapsing-margins
0

我知道这是一个老问题，但我想指出，在问题中给出的示例中，可以使用填充而不是边距：

<!-- HTML -->
<body>
  <div>
    content
  </div>
</body>

<!-- CSS -->
<style>
  html, body {
    box-sizing: border-box; /* padding makes part of the */
    height: 100%;           /*  box whose height is 100% */
    margin: 0;
    padding: 0;
    outline: 1px solid blue;
  }
  
  body {
    padding: 20px;
  }
  
  div {
    outline: 1px solid red;
  }

</style>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接