我一直以为inline-block是一个很简单的属性，把inline元素设置为display:inline-block，就能得到一个可以设置宽高、有block特性的的inline元素；或者把block元素设置为display:inline-block，就能得到一个可以在行内显示的block元素。
但其实，inline-block是一个非常复杂的属性,它与line-height、vertical-align密不可分，并且存在着两个很大的问题——间隙和居中。这篇博客主要对这两个问题进行整理并描述了inline-block的几个应用场景。
文章结构：
-
inline-block的问题
- 关于间隙
- 关于对齐
-
inline-block的应用场景
- inline-block包住浮动元素
- inline-block实现水平垂直居中
一、inline-block的问题
1、关于间隙
首先我们来看inline元素，举一个非常简单的例子。
// html
<body>
<span>1</span>
<span>2</span>
</body>
结果是什么？
选项A：12
选项B：1 2
为了方便观察，我们给span加上border：
// css
span{
border:1px solid;
}
结果：
我们看到，1和2之间是有空隙的，所以上面应该选“B”。
inline-block是一种特殊的inline元素，那如果我把上面的span设置为inline-block，结果又是什么样的呢？
// css
span{
display:inline-block;
border:1px solid;
}
结果：
我们看到，与上面的结果几乎一模一样（不一样的地方在于设置为inline-block时边框要高一些，这是由line-height决定的），都有空隙。造成空隙的原因是两个inline/inline-block元素之间有空格/回车。去掉这个回车即可消除空隙。
// html
<body>
<span>1</span><span>2</span>
</body>
结果：
但是你总不能永远不写空格、回车吧？
还有一种方法，设置父元素的font-size为0（这样空格/回车的font-size也为0），再设置span的font-size为 'xx'px即可，代码如下：
<body>
<div>
<span>1</span>
<span>2</span>
</div>
</body>
div{
border:1px solid red;
font-size:0;
}
span{
font-size:16px;
display:inline-block;
border:1px solid;
}
但是这样是很麻烦并且容易出错的，所以这种方法也不建议使用！
在实际工作中，建议使用block/float/flex，弃用inline-block。block/float/flex均可消除这个间隙。
2、关于对齐
你可能不理解我这里的“关于对齐”是什么意思。同样，我们来看代码：
// html
<div>
<span class='s1'>
1
<span class='s2'>
2
</span>
</div>
// css
div{
border:1px solid red;
}
span{
display:inline-block;
border:1px solid;
}
.s1{
width:100px;
height:200px;
}
.s2{
width:200px;
height:300px;
}
结果：
除了上面讨论过的空隙问题外，其他都是正常的。我们改变第一个span的内容：
<span class='s1'>
1哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</span>
结果：
我们改变第二个span的内容：
<span class='s2'>
2嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿
</span>
结果：
我们同时改变二个span的内容：
<span class='s1'>
1哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</span>
<span class='s2'>
2嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿
</span>
结果：
综上，inline-block除了空隙问题外，还出现了一个新的问题——两个inline-block的对齐问题。由于才疏学浅、经历有限，我还并没有彻底弄清楚到底为什么会这样，只是知道和字体默认的基线对齐'vertical-align:baseline'有关。
现在我们给span添加vertical-align：
// html
<div>
<span class='s1'>
1哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</span>
<span class='s2'>
2嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿
</span>
</div>
// css
div{
border:1px solid red;
}
span{
display:inline-block;
border:1px solid;
}
.s1{
width:100px;
height:200px;
vertical-align:top;
}
.s2{
width:200px;
height:300px;
}
结果：
所以，要想实现inline-block的对齐，需要改变 inline-block 元素的vertical-align:top /middle。在实际工作中，同样建议使用float/flex，弃用inline-block。
总结：
1、使用inline-block：该元素是独生子，没有兄弟元素，不需对齐（这样也不会有空隙问题）
2、inline-block一定要慎用！inline-block一定要慎用！inline-block一定要慎用！
二、inline-block的应用场景
1、inline-block包住浮动元素
我们现在想实现这样一个界面：
‘logo’和‘login’水平垂直居中，且中间没有空隙。
前面讲到，如果想要去除inline/inline-block的空隙，最好使用block/float/flex，弃用inline-block。使用flex十分简单，这里我们就使用float完成这个效果。
// html
<body>
<div class='parent'>
<span>logo</span>
<span>login</span>
</div>
</body>
// css
body{
margin:0;
padding:0;
}
.parent{
max-width:300px;
margin:0 auto;
border:1px solid;
}
span{
border:1px solid red;
float:left;
}
结果：
我们知道，当元素设置float后，元素就脱离了文档流，所以两个span元素已经不在.parent里了。那我怎么可以让这两个浮动元素居中呢？
这时候，inline-block就派上用场了。由于inline-block可以包住浮动元素，我们在两个span的上面加一个inline-block包裹住他们。代码如下：
// html
<body>
<div class='parent'>
<div class='box'>
<span>logo</span>
<span>login</span>
</div>
</div>
</body>
// css
body{
margin:0;
padding:0;
}
.parent{
max-width:300px;
margin:0 auto;
border:1px solid;
}
.box{
border:1px solid blue;
display:inline-block;
}
span{
border:1px solid red;
float:left;
}
结果：
你看，inline-block是不是把两个浮动元素包住了？如果你还存在疑问，可以试试block，看看能不能包住浮动元素（结果肯定是不能），是不是很神奇？
其实，inline-block之所以能包住浮动元素，是因为BFC的影响，大家可查看我的另一篇博客为什么"overflow:hidden"能清除浮动的影响中对BFC的讲解。
接下来，我们对.parent元素设置居中：
.parent{
max-width:300px;
margin:0 auto;
border:1px solid;
text-align:center;
}
结果：
但是，inline-block下面还是有空隙啊！这是怎么回事？
inline-block默认基线对齐,所以inline-block下方还是有一个空隙（请参考我的另一篇博客“图片下方为什么会有空隙”）。所以我们仍需设置这个inline-block的vertical-align：
.box{
border:1px solid blue;
display:inline-block;
vertical-align:top/bottom/middle;
}
结果：
2、inline-block实现水平垂直居中
inline-block实现水平垂直居中要和vertical-align配合使用，该方法能实现不定长多行文字、不定长图片的水平垂直居中。
首先我们先来实现垂直居中，代码如下：
// html
<body>
<div class='wrapper'>
<span></span>
</div>
</body>
// css
body{
padding:0;
margin:0;
}
*{
box-sizing:border-box;
}
.wrapper{
width:400px;
height:300px;
margin:0 auto;
border:1px solid;
text-align:center;
}
span{
display:inline-block;
border:1px solid blue;
height:100%;
vertical-align:middle;
}
img{
width:200px;
vertical-align:middle;
}
结果：
分析：
在图片前面设置一个“透明”的span（为了观察方便我将span显示出来），将这个span设置为inline-block并设置高度与父元素的高度相同，这样，同时设置该span和图片以中线对齐vertival-align:middle，即可实现垂直居中效果。
我们很容易看到，这时的图片仅仅实现了垂直居中，还未实现水平居中，原因在于span和图片之间的“空隙”。我们通过在图片后面再添加一个相同的span来“抵消”这个空隙。代码：
// html
<body>
<div class='wrapper'>
<span></span>
<span></span>
</div>
</body>
结果：
最后消除两个span的边框：
//添加span样式
span{
border:1px solid transparent;
}
结果：
至此，我们就实现了图片的水平垂直居中。
最后，我们对上述代码做一个小小的改进。我们看到，图片前面和后面都有一个span元素，换句话说，父元素的第一个子元素和最后一个子元素都是无内容不可见的span元素，因此我们可以使用伪元素的特性进行一些改进，代码如下：
// html
<body>
<div class='wrapper'>
</div>
</body>
// css
.wrapper{
width:400px;
height:300px;
margin:0 auto;
border:1px solid;
text-align:center;
}
.wrapper::before,.wrapper::after{
content:'';
border:1px solid transparent;
display:inline-block;
height:100%;
vertical-align:middle;
}
img{
width:200px;
vertical-align:middle;
}
结果：
其实，flex可以很简单地实现水平垂直居中的这个功能，只需要短短三行代码即可。CSS3果然很方便啊......
由于个人水平有限，博客错误之处，烦请指正！
网友评论