Question

这样的div网格

<div id="outer1"><!--
    --><div class="inner top left">&nbsp;</div><!--
    --><div class="inner top right">&nbsp;</div><!--
    --><div class="inner bottom left">&nbsp;</div><!--
    --><div class="inner bottom right">&nbsp;</div><!--
--></div>
<br>
<div id="outer2"><!--
    --><div class="inner top left"></div><!--
    --><div class="inner top right"></div><!--
    --><div class="inner bottom left"></div><!--
    --><div class="inner bottom right"></div><!--
--></div>

我的造型为

* {
    box-sizing: border-box;
    margin:0;
    padding:0;
}
body {
    background-color: black;
}
#outer1, #outer2 {
    width:200px;
    height:200px;
    margin:auto;
    border-radius:50%;
}
.inner {
    height: 50%;
    width:50%;
    display: inline-block;
}
.top.left {
    background-color: green;
    border-radius: 100% 0 0 0;
}
.top.right {
    background-color: #ff3300;
    border-radius: 0 100% 0 0;
}
.bottom.left {
    background-color: darkcyan;
    border-radius: 0 0 0 100%;
}
.bottom.right {
    background-color: darkred;
    border-radius: 0 0 100% 0;
}

第一个有效，但第二个有上下div之间的差距。

为什么会出现差距？

Answer 1

原因是由于利润率没有下降。

“在本规范中，表达式折叠边距意味着两个或多个框的相邻边距（没有非空内容，填充或边框区域或间隙将它们分开）（这可能是彼此相邻或嵌套的）组合形成一个边距。“

所以，在这种情况下，空的内联块元素（没有边框/内容/填充间隙将它们分开）没有边缘折叠。

了解更多信息：http://www.sitepoint.com/web-foundations/collapsing-margins/

将 放在其他div中

检查这个小提琴http://jsfiddle.net/hGadw/3/

<div id="outer1"><!--
    --><div class="inner top left">&nbsp;</div><!--
    --><div class="inner top right">&nbsp;</div><!--
    --><div class="inner bottom left">&nbsp;</div><!--
    --><div class="inner bottom right">&nbsp;</div><!--
--></div>
<br>
<div id="outer2"><!--
    --><div class="inner top left">&nbsp;</div><!--
    --><div class="inner top right">&nbsp;</div><!--
    --><div class="inner bottom left">&nbsp;</div><!--
    --><div class="inner bottom right">&nbsp;</div><!--
--></div>

Answer 2

您看到的空间是由line-height引起的。这是一个CSS属性，可以确保来自您的上一行的te字母不会触及来自当前行的字母。设置line-height:0将删除这些行之间的所有空格。

#outer1, #outer2 {
    width:200px;
    height:200px;
    margin:auto;
    border-radius:50%;
    line-height:0px;   /*<---- removes spacing between lines*/
}

请参阅：http://jsfiddle.net/qnRQj/1/

空div之间的差距

2 个答案: