6

我正在为 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

到目前为止，我已经通过向border:1px solid transparent;body 元素添加属性解决了这个问题。这会破坏 100% 的高度，因为滚动条是由于1px边框而出现的。为什么会这样？

可能的解决方案（感谢您的帮助）：添加 apadding-top:1px和 a margin-top:-1px，这样滚动条不会破坏 100% 的高度，并且您可以避免边距折叠。

4

3 回答 3

3

这听起来类似于我遇到的一个问题：Margins andnegative margins。我通过放置一个填充顶部而不是边框​​来解决我的问题，也许这对你的设计稍微好一点？否则试试这个链接：http ://www.seifi.org/css/understanding-taming-collapsing-margins-in-css.html

于 2011-10-12T15:43:56.743 回答
2

这是由称为折叠边距的效果引起的。

某些相邻的边距组合成一个单一的边距。这些利润被称为“崩溃”。如果没有非空内容、填充或边界区域或间隙来分隔它们，则边距是相邻的。

http://www.w3.org/TR/css3-box/#collapsing-margins

于 2011-10-12T15:45:29.203 回答
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>

于 2019-06-12T15:08:55.390 回答