Question

我真的很困惑，这是我生命中见过的最奇怪的虫这是JSFiddle示例：http://jsfiddle.net/c92mjkne/1/

正如您所看到的，当我们的“评论”悬停时，#content会获得stange边距（但在CSS中它没有边距）。据我所知，它是ol的边缘。但为什么他们不在父母div之外呢？好的，这很奇怪。但！当我们在padding: 0;的CSS中将padding: 1px;更改为#content时，我们看到，该块没有边距！ WTF？请帮帮我：D我真的不知道如何谷歌：D

以下是示例：

#head, #foot, #content {
    padding: 7px;`
}

#content {
    padding: 0;
}

#comment:hover div {
    background: #eee;
}

#comment {
    border: 1px solid rgba(0, 0, 0, 0);
}

#comment:hover {
    border: 1px solid gray;
}
ul {
    margin: 7px;
}

<div id="comment">
    <div id="head">
        Efog <span style="color: gray">today, 10:10 pm</span>
    </div>
    <div id="content">
        <ul>
            <li>Hello</li>
            <li>Stack</li>
            <li>Overflow</li>
        </ul>
    </div>
    <div id="foot">
        <a href="?">answer</a>
    </div>
</div>

这是代码padding: 1px：

#head, #foot, #content {
    padding: 7px;`
}

#content {
    padding: 1px;
}

#comment:hover div {
    background: #eee;
}

#comment {
    border: 1px solid rgba(0, 0, 0, 0);
}

#comment:hover {
    border: 1px solid gray;
}
ul {
    margin: 7px;
}

<div id="comment">
    <div id="head">
        Efog <span style="color: gray">today, 10:10 pm</span>
    </div>
    <div id="content">
        <ul>
            <li>Hello</li>
            <li>Stack</li>
            <li>Overflow</li>
        </ul>
    </div>
    <div id="foot">
        <a href="?">answer</a>
    </div>
</div>

对不起英语，谢谢。

Answer 1

据我所知，它是ol的边缘。但为什么他们不在父母div之外呢？

因为假定（不是div的“外部”，它们已成为 div的边距 - http://www.w3.org/TR/CSS21/box.html#collapsing-margins：

“在CSS中，两个或多个框（可能是也可能不是兄弟姐妹）的相邻边距可以组合形成单个边距。以这种方式组合的边距被称为折叠，结果合并边距称为折叠边距。

相邻的垂直边距崩溃，[...]“

所以没有任何错误，但规范也随之而来。


BUT！当我们在padding: 0;的CSS中将padding: 1px;更改为#content时，我们看到，该块没有边距！

请继续阅读上述内容，


“两个边距毗邻当且仅当：
  [...]
   - 没有线盒，没有间隙，没有衬垫，没有边框将它们分开   [...]”

Answer 2

http://jsfiddle.net/c92mjkne/2/

#comment:hover{
  background: gray;
}

这是正常的，你将评论div中的每个div设置为背景，但是你设置了一些余量。如果您不想要任何空白区域，只需将背景颜色设置为包含它们的div。

这不是一个错误。

填充，列表和背景

2 个答案: