问题描述
我试图将这样的div网格制成 http://jsfiddle.net/hGadw/
I tried to make a grid of divs like this http://jsfiddle.net/hGadw/
<div id="outer1"><!--
--><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>
<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之间有间隙.
The first one worked but the second one has a gap between the upper and lower divs.
为什么会出现差距?
推荐答案
原因是由于页边距没有缩小.
The reason is due to not collapsing margins.
在本规范中，表述边距塌陷是指两个或多个框的相邻边距(没有非空内容，填充或边框区域，或间隙将它们隔开)(可能彼此相邻或嵌套)合并以形成单个边距."
"In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding, or border areas, or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin."
因此，在您的情况下，空的行内块元素(没有边框/内容/填充间距将它们分隔开)边距不会塌陷.
So, here in your case, empty inline-block elements (no border/content/padding clearance separate them) do not have their margins collapsed.
有关更多信息: http://www.sitepoint.com/web-foundations/collapsing-margins/
也将& nbsp; 放入其他divs
Put in the other divs as well
检查此小提琴 http://jsfiddle.net/hGadw/3/
<div id="outer1"><!--
--><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>
<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>
这篇关于空div之间的差距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！