display: inline-block

CSS布局中将元素的display属性设置为inline-block是一种很常用的方法，这样做主要是为了让元素排列在一排，并且可以设置元素的宽高、margin、padding属性。

将元素的display属性设置为inline-block后会出现一些与我们期望不太一样的效果，下面是一个父元素包裹着三个子元素，想通过设置子元素的display来实现并排展示：

HTML

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

.container{
    width: 500px;
    margin: 50px auto;
    border: 1px solid blue;
}
.item{
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid red;
}

在浏览器中看到的效果是这样子的：
这里写图片描述

与我们期望不太一样的地方：

1、没有为子元素设置margin，子元素之间却产生的间距；
2、没有给父元素设置高度，想通过子元素的高度来撑起父元素的高度，却发现父元素的高度大于子元素的，子元素与父元素的下边界存在空白；

此时，我们最想知道的就是这两处的空白间距是如何产生的以及怎样消除它。

1、子元素之间的间距（子元素右侧的空白）

子元素之间的空白是由于我们在书写子元素的html代码时换行所产生的。

HTML

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

解决方法：

1、书写子元素html代码时取消换行

第一种写法：

<div class="container">
    <div class="item"></div><div class="item"></div><div class="item"></div>
</div>

第二种写法：

<div class="container">
    <div class="item">
    </div><div class="item">
    </div><div class="item">
    </div>
</div>

效果：
这里写图片描述

2、将子元素之间的换行注释掉

<div class="container">
    <div class="item"></div><!-- 
     --><div class="item"></div><!-- 
     --><div class="item"></div>
</div>

效果：
这里写图片描述

3、将父元素的font-size设置为0

.container{
    font-size: 0;
}

效果：
这里写图片描述

2、子元素与父元素下边界之间的间距（子元素下方的空白）

子元素下方的空白是由于内联元素的对齐方式引起的；内联元素（display: inline）和内联块元素（display: inline-block）在垂直方向上的对齐方式（vertical-align）默认是按照元素的基线（baseline）进行对齐；对于内联块元素（display: inline-block），如果它里面没有内联元素时，其基线（baseline）就是元素的margin底部边缘；如果内联块元素（display: inline-block）的基线（baseline）位于元素的margin底部边缘时，浏览器会默认在其基线下方留有一点空白，chrome是4px，IE是4.14px。

HTML

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

解决方法：

1、设置父元素的line-height为0

.container{
    line-height: 0;
}

效果：
这里写图片描述

2、改变内联块元素的vertical-align的对齐方式

.item{
    vertical-align: top;
    /*vertical-align: middle;*/
    /*vertical-align: bottom;*/
}

效果：
这里写图片描述

3、设置父元素的font-size为0

.container{
    font-size: 0;
}

效果：
这里写图片描述

参考文献

[1] CSS深入理解vertical-align和line-height的基友关系
[2] [翻译]关于Vertical-Align你需要知道的事情