设置display:inline-block产生间隙
Posted a瑶池
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了设置display:inline-block产生间隙相关的知识，希望对你有一定的参考价值。
display:inline-block产生间隙，是由于换行在内的空白符
display:inline-block在IE下仅仅是触发了layout，而它本是行布局，触发后，块元素依然还是行布局。所以需让块元素呈递为内联对象，display:inline则起到了这一作用（*号只被ie6、7所识别），然后再通过zoom:1触发layout。即可实现所谓的inline-block。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.layout
{
width: 750px;
margin: 150px auto 0 auto;
background: #cccccc;
font-size: 0;
}
.layout2
{
width: 250px;
display: inline-block;
*display: inline;;
*zoom:1;
font-size: 20px;
background: #666666;
text-align: center;
}
</style>
</head>
<body>
<div class="layout">
<div class="layout2">
1
</div>
<div class="layout2" >
2
</div>
<div class="layout2">
3
</div>
</div>
</body>
</html>
2.也可以写成
<div class="layout2">
1
</div><!--
--><div class="layout2">
2
</div><!--
--><div class="layout2">
3
</div>display:inline-block引发的间隙思考
一、导火线
没错，总有一类属性在助你轻松寻得捷径的同时，也可为你增添烦劳，比如本文的主谋display:inline-block。众前端们所诸知，其作用是将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。然而不幸的是，它并没有得到所有浏览器的支持，比如ie6、7和古老一点的firefox完全无视它，由于firefox的老版本几乎已经从市场中消失，所以名义上firefox是支持display:inline-block的，除此之外，伟大的chrome、Opera、Safari都能很好地支持。尽管如此，依然还是可以通过hack的手段让ie6、7两位难兄难弟变得温顺，比如像这样：
需要解释的是，display:inline-block在IE下仅仅是触发了layout，而它本是行布局，触发后，块元素依然还是行布局。所以需让块元素呈递为内联对象，display:inline则起到了这一作用（*号只被ie6、7所识别），然后再通过zoom:1触发layout。即可实现所谓的inline-block。但事情远远没有结束，这个家伙面临多项后事需要您来处理，比如会默认有外边距(ie6、7除外)。而在这一问题之前，你也许需要放松一下，来看看下面这样一个现象。
二、是什么引发了间隙
上面提到，尽管inline-block默认会存在间隙，那么当我们试图对其中的某一个元素单独设置margin-bottom或者padding-bottom时（当然你也可以试着设置margin-top或者padding-top），它会呈现以下模型：
这意味着什么？ 我们可以借助vertical-align:top;这个属性来消除垂直间隙。
如此多奇异性让我们对css充满着好奇与不解，也许正因为如此才让浮动式布局成为主流。在文中的第一部分提到：inline-block允许空格，这是否又意味着什么？在一番剖析之后，我们惊奇地得出了答案：罪魁祸首是包括换行在内的空白符。
于是我们立马消除空格、换行等家伙，结果验证了这种推断的正确性。但这并不是好的解决方案，因为在复杂的html组合体之间，我们很难避免出现换行之类的空格。解铃还需系铃人，css引发的现象，理应由css本身来解决不是吗。
三、最终的统一
也许??嗦得太多不一定是好事，那么干脆看下我们所需要的最终模型吧！
让这一问题得到握手的，是font-size:0; 他的作用便是让多余的空白符消失，当然这会造成所有子元素的文本都一同消失，因此你需要再在子元素加一个font-size:12px。
贤心 写于2013.4.4
以上是关于设置display:inline-block产生间隙的主要内容，如果未能解决你的问题，请参考以下文章
关于display inline-block 产生间距的问题
行内元素，display:inline-block元素，元素间间隙问题的解决
display:inline-block间隙产生的原因以及解决方案