行内元素 或 行内块元素在布局中的特点
1. 父元素设置的文本属性可以作用于行内元素 和 行内块元素
① 让行内块元素在父元素中水平居中
给父元素设置text-align:center
② 让行内块元素在父元素中纵向居中
-
给
父元素设置行高与父元素高度一致 -
给行
内块元素本身设置vertical-align:middle
2.行内元素 或 行内块元素之间的空白问题
① 元素之间的空白（左右）
产生原因：
代码中的换行
解决方法：
-方案一： 代码之间不写换行
-方案二： 父元素设置font-size:0; 再单独给行内块元素设置font-size
② 底部的空白（图片的幽灵空白）
产生原因：
行内块元素默认底部与文字基线对齐，底部空白就是基线与底线的距离
解放方案：
-方案一： 父元素设置字体大小为0
-方案二： 给行内块元素本身设置 vertical-align 值不是 baseline
-方案三： 如果是图片，可以给图片设置成块级
③ 文字内容个数不同的行内块元素水平排列无法对齐
产生原因：
默认情况下，行内块元素会让里面的文字与外面文字基线对齐
① 如果有一行文字，就是该行文字与外面文字基线对齐
② 如果有多行文字，最后一行文字与外面文字基线对齐
③ 如果没有文字，自己的底部与外面文字基线对齐
解决方案：
给行内块元素设置 vertical-align，值不是 baseline