行级元素：
特点：1.可以和其他元素处于一行，不用必须另起一行。
2.元素的高度、宽度及顶部和底部边距不可设置。
3.元素的宽度就是它包含的文字、图片的宽度，不可改变。
4. display默认属性为inline。
a b i span img input select strong lable
块级元素可以通过display属性设置inline或者inline-block变为行级元素
一说行级在一个页面中出现最多的肯定是文字了，先来总结一下文字的一些细节：
看图中的几条线基本上可以类比成我们写英文的四线三格了，其中最为重要的就是自下而上的第二根baseline，英文或者拉丁文在其中的占位和我们在四线三格中写的英文是一样的，而多出的一条cap line是大写字母的顶线。
而我们平常应用的line-height属性行高就是设置两行文字baseline之间的距离。
而控制行级元素在行中占位往往通过vertical-align属性来控制垂直对齐方式，其属性值有：
baseline（默认）、sub、super、top、text-top、middle、bottom、text-bottom、具体数值或百分比，或许属性值的意思你还不明确，没关系，看下图：
对比两图可以看出middle线为baseline和meanline的中线。top和bottom线为行级元素如一个inline-block盒子的最上端和最低端，位置随元素大小变化。
**需要特别注意的是所有行级元素都会有默认的vertical-align：baseline属性的行内占位某些特殊情况默认属性会与你预期效果不符。要通过自己设置该属性来满足要求。
例如：
由图例给p背景颜色可以看出图片下方有空白，而通过旁边的小写字母y可以清楚的发现空白的大小即为baseline与text-bottom线的距离。这正是由于默认的vertical-align：baseline；造成的。
解决办法有很多改变图片vertical-align属性值或者改为块级元素即可