在使用display:inline-block这个属性的时候，进行行内并排，往往不会按照你预期的方式进行布局排列。
下面看看这个例子出现的问题：
代码实例：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.container {
border:3px solid #fdc72f;
}
.content_1 {
display: inline-block;
vertical-align:top;
width:25%;
background-color: #d64078;
}
.content_2 {
display: inline-block;
vertical-align:top;
width:25%;
background-color: #d64078;
}
.content_3 {
display: inline-block;
vertical-align:top;
width:25%;
background-color: #d64078;
}
.content_4 {
display: inline-block;
vertical-align:top;
width:25%;
background-color: #d64078;
}
</style>
</head>
<body>
<div class="container">
<div class="content_1">
我是内容一。
</div>
<div class="content_2">
我是内容二。
</div>
<div class="content_3">
我是内容三。
</div>
<div class="content_4">
我是内容四。
</div>
</div>
</body>
</html>效果图如下：
本来每个div占宽25%应该把这一行占满，但是并没有，而且第四个div还跑到了第二行，除此之外，它们之间还存在着缝隙。
产生这些缝隙的原因是这中间有些空白字符。那么消除这些空白字符的办法就是给其父元素设置font-size:0。
代码如下所示:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.container {
border:3px solid #fdc72f;
font-size:0;
}
.content_1 {
display: inline-block;
vertical-align:top;
width:25%;
background-color: #d64078;
}
.content_2 {
display: inline-block;
vertical-align:top;
width:25%;
background-color: #d64078;
}
.content_3 {
display: inline-block;
vertical-align:top;
width:25%;
background-color: #d64078;
}
.content_4 {
display: inline-block;
vertical-align:top;
width:25%;
background-color: #d64078;
}
</style>
</head>
<body>
<div class="container">
<div class="content_1">
我是内容一。
</div>
<div class="content_2">
我是内容二。
</div>
<div class="content_3">
我是内容三。
</div>
<div class="content_4">
我是内容四。
</div>
</div>
</body>
</html>效果图如下：
当给父元素设置font-size:0后，发现文字消失了，结果变成了上图的样子。
是由于自身未对文字设置font-size，是继承了父元素的font-size，所以再给子元素赋值font-size就能够得到想要的结果。
代码如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.container {
border:3px solid #fdc72f;
font-size:0;
}
.content_1 {
display: inline-block;
vertical-align:top;
width:25%;
font-size:16px;
background-color: #d64078;
}
.content_2 {
display: inline-block;
vertical-align:top;
width:25%;
font-size:16px;
background-color: #d64078;
}
.content_3 {
display: inline-block;
vertical-align:top;
width:25%;
font-size:16px;
background-color: #d64078;
}
.content_4 {
display: inline-block;
vertical-align:top;
width:25%;
font-size:16px;
background-color: #d64078;
}
</style>
</head>
<body>
<div class="container">
<div class="content_1">
我是内容一。
</div>
<div class="content_2">
我是内容二。
</div>
<div class="content_3">
我是内容三。
</div>
<div class="content_4">
我是内容四。
</div>
</div>
</body>
</html>效果图如下：
