最近看到一篇20个CSS高级技巧汇总的汇总，感触很深，不过我想，与技巧相比，有些常见css布局难题，有时候更加让我们的日常开发变得踌躇沮丧吧。
在写这一篇文章之前，自己还写过一篇：
我所不注意的那些CSS冷知识，但却阻止了我做项目的速度
，如果你看了，我相信你也会受益的。
为什么此处li标签内的p元素看起来独自撑开了一行
这是我在segmentfault上看到的一个问题，以前自己遇到过，所以就很热情洋溢的去回答了一下，难道遇到个自己会的，示例代码是这样的：
li{
display: inline-block;
text-align: center;
}
.left,.center,.right{
width:300px;
height:300px;
}
.left{
background-color: #999;
}
.center{
background-color: #ccc;
}
.right{
background-color: #eee;
}
HTML:
class="left">
"display: inline-block;">1
class="center">
class="right">
![]()
大概就是这样子，其实文和图有点不对应，代码中第一个模块他只写了一个“1”,我为了现象更加明显，且好说明为什么，就打了一大段文字，现在我们来说说为什么。先来一张图，看懂vertical-align的几个属性,顺便带上图片出处，文章讲得还可以，理解这张图片，后面就好理解了。
![]()
inline-block的vertical-align 属性默认是baseline对齐（深入理解的送福利），也就是英文文字小写字母a,b,c这类字母底部的那条线，因为这些是外国人发明的，所以以英文字母才有针对性。
inline-block拥有vertical-align属性，其默认是基线对齐的，所以这三个inline-box需要基线对齐，而其基准线就是正常流中最后一个line box的基线,如果这个元素是空的，没有内容，那么这个基线就是最后这个元素的margin-bottom线；如果这个元素不为空，那么这个元素的基线就是元素里面内容最后一行文字的基线；所以我们一个一个来套，发现这三个li元素在一行，第一个有文字，其基线为文字底部；最后一个没有文字，
其基线为margin-bottom线,考试要考，划重点，可以自己为元素设置margin-bottom试试
,这就会造成第一个和二，三个错行的感觉，其实他两是为了基线对齐，所以多敲几十个文字就能明显看出其差别。
所以最简单的解决方案就是为li添加vertical-align: 属性不为baseline，气不气，改变其纵向的对齐方式的默认属性;为啥非弄个折腾人勒。关于vertical-align,如果还想做这方面的深入了解，可以看看张大侠的分析
img图片撑不满整个div，有空隙
直接上图更直观(箭头所指)：
![]()
相关css和html：
body,div{margin: 0;padding: 0;}
.test{
background-color: yellowgreen;
}
img{
width:260px;
height:260px;
}
class=
"test">
![]()
width="130" height="130" src="http://img2.jintiankansha.me/get3?src=http://user-gold-cdn.xitu.io/2017/12/10/160409cc0f090c6f">
其实这个问题，如果你单单这样看，和我一样涉世未深的话，是一眼看不出答案的，但是如果你在图片后面多敲两个文字，你就会发现，和上个问题，这又是一个有关于vertical-align属性相关的问题。
这下你应该就懂了，下面的空隙的距离实际上等与1个line-height的底边与baseline之间的间距。仔细观察，图片的底边是和a的下边缘是在一条水平线上的，而不是和‘看’字下边缘一条水平线上的。所以为什么上面说这又是一个和vertical-align属性相关的问题。先说解决方案。
也许到这里，你和我一样，有疑惑，为什么vertical-align是一个对块状元素无效的属性，设置img为块级元素，其和div就可以完美在一起，而一个内联元素放在块状元素里，就非得有隔阂。
开始，我也是有这个疑问的，个人理解就是块状元素里面装了一个内联元素，如果块状没有显示的设置高度，其高度是由里面的最高的lineboxes组成的，这个div其实就是有两个lineboxes组成，图片linebox和
，其实还有一个linebox就是div自身的innerText('')，这不过这里内容为空，如果你把span去掉，你就更能理解这个隐身的linebox，所以就像是两个内联元素在一起，需要baseline对齐。
所以网上有人说设置img{font-size:0;},是非常错误的,img元素很特殊，他不但是内联元素，他还是一个置换元素（下面会讲），它的高度不是文字内容撑开的，是其置换的图片高度撑开的，所以设置font-size是无效的。
