Question

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

这是结果和问题：

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

可能的解决方案（感谢您的帮助）：添加padding-top:1px和margin-top:-1px，这样100％的高度不会因滚动条和您的问题而毁了避免利润率崩溃。

Answer 1

这听起来与我遇到的问题类似：Margins and negative margins。我通过填充顶部而不是边框来解决我的问题，这可能会使你的设计稍好一点吗？否则，请尝试以下链接：http://www.seifi.org/css/understanding-taming-collapsing-margins-in-css.html

Answer 2

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

某些相邻的边距合并形成一个边距。这些利润被称为“崩溃”。如果没有非空的内容，填充或边界区域或间隙将边缘区分开，则边距相邻。

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

Answer 3

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

<!-- 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>

CSS边距推动身体元素

3 个答案: