行内块元素间隙

源码下载

《Web应用界面(display)》中的案例有一些瑕疵，不知大家在学习的时候是否发现。行内元素、行内块元素和普通文字一样都是一个子单元，当你在编写代码的时候两个汉字之间如果有空格，在浏览器页面上两个文字就有间距。不过不管你空的空格有多少，网页上显示的文字间距是不变的，如果想控制间距大小要通过 符号实现，不能像word里面，用空格键产生空格，要注意这一点。

《Web应用界面(display)》代码修正

最简单的方法，写行内元素的时候不换行，就像写文字，但是为了提高代码的可阅读性，每一个元素往往会独占一行，这时候就产生一个问题，两个行内元素或者两个行内块元素的标签之间就产生了大量空格，如果网站压缩后清除空格发布没有问题，那平时调试怎么办？编程的时候，注释语句经常操作，这时候你可你把换行后产生的所有空格理解为代码，然后使用元素注释符号 把它们注释掉就可以。

源代码

    <div class="bottom padding radius top-radius">点</div>
    <div class="bottom padding">直线</div>
    <div class="bottom padding">闭合直线</div>
    <div class="bottom padding">三角面</div>
    <div class="padding bottom-radius">三角带</div>

注释空格后代码

   <!--注释空格-->
    <div class="bottom padding radius left-radius">点</div><!--
    --><div class="bottom padding">直线</div><!--
    --><div class="bottom padding">闭合直线</div><!--
    --><div class="bottom padding">三角面</div><!--
    --><div class="padding right-radius">三角带</div>

行内块元素水平间隙

上面说到的问题是行内块元素、行内元素或者文字因为空格产生的bug是数值的间隙，下面要说的行内块元素的水平间隙问题。

vertical-align

 vertical-align:bottom;/*消除水平间隙，把属性值设为top、bottom、middle等值都可以*/

行内块元素的样式属性vertical-align默认值是baseline，baseline代表的意思是行内块元素底部与每一行的基线对齐，会产生间隙，通过更改 vertical-align的属性值就可以解决。如果不太理解，就要学习CSS中关于基线、行高的概念。

vertical-align

前面的CSS布局知识，很少牵扯到行的问题，多数情况下行都是当成黑箱处理，一篇文章，文字之间的距离，往往采用默认设置，事实上它是可以设置的。测试下面行高为100px的块元素里面文字的显示效果。

<div style="width: 500px;line-height: 100px;font-size: 16px">
        随着3D打印技术的开发，3D打印机成本与价格下降很快，尤其使用塑料丝的熔融沉积式
    3D打印机的价格，已经降至数千元，但是3D打印耗材的价格却相对昂贵，因此开发桌面级3D
    耗材挤出机，利用生活中的废塑料粉碎颗粒或原生塑料颗粒作为原料生产丝材，可以使用3D
    打印耗材成本几何数量级下降
</div>

设计网页的时候，如果不设置行高度，行的高度会跟随字体大小变化而变化，多数浏览器一般默认的行高是字体大小加4px，比如多数浏览器默认字体font-size: 16px，行高就是20px。

每一行的高度是100px,每一行都有一个中间线，当字体大小一样的时候，你可以认为文字的中心线与行的中心线重合。当一行内出现大小不同的文字或者有比字体高度大的图片或其他任意行内元素、行内块元素，这时候相当于高度最大的元素或文字的中心线与行的中心线重合，然后其他的行内元素、行内块元素默认与最高的底部重合。这时候文字的处理有个问题，就是英文字母的高度并不一致，把26个字母写成一排，比如以x字母的底部为准画一条线，y、g等字母就会有一部分在这条基准线的下面，这条基准线称为基线，比如一行内容，文字偏小，文字的基线会与行内块元素的底部主动重合，当然可能其它教程要会反过来说，一个元素的底部边缘与文字的基线重合，会导致大家理解混乱。

不同的文字大小、行内元素、行内块元素同时存在

<div style="background-color: #00B7FF">
中美
<sapn style="font-size: 50px">朝贡体系</sapn>
的区别是什么？
<sapn style="font-size: 25px">王道与霸道</sapn>
的区别是什么？
    <div style="display: inline-block;height: 300px;width: 150px;background-color: #0000cc;"></div>

</div>

一行中的文字和块元素的对齐方式可以通过更改vertical-align属性值实现,默认的对齐方式是元素的底部与文字的基线对齐，这会产生一个问题，及时行里面没有文字，但是行也会虚拟出文字的存在，也就是说基线下面会存在4px间隙，要想消除bug，就要把改变对齐方式，让所有的行内块元素不在受文字的基线制约，更改元素之间以元素底部、顶部都可以作为参考，不把文字的基线作为参考，自然也不能以文字的底部或顶部作为参考。

对齐方式

属性值	对齐方式
baseline	元素基线与父元素基线对齐，默认值
bottom	元素底部与父元素底部对齐
top	元素顶部与父元素顶部对齐
middle	元素中线与父元素中线对齐
top	与父元素顶部对齐
px	直接赋值绝对值，决定对齐位置
%	相对值，以字体为准
text-top	元素顶部与父元素文字顶部对齐
text-bottom	元素顶部与父元素文字顶部对齐