行内元素 或 行内块元素在布局中的特点

行内元素 或 行内块元素在布局中的特点

1. 父元素设置的文本属性可以作用于行内元素 和 行内块元素

① 让行内块元素在父元素中水平居中

给父元素设置text-align:center

② 让行内块元素在父元素中纵向居中

1. 给父元素设置行高与父元素高度一致

2. 给行内块元素本身设置 vertical-align:middle

2.行内元素 或 行内块元素之间的空白问题

① 元素之间的空白（左右）

产生原因：

代码中的换行

解决方法：

-方案一： 代码之间不写换行
-方案二： 父元素设置font-size:0; 再单独给行内块元素设置font-size

② 底部的空白（图片的幽灵空白）

产生原因：

行内块元素默认底部与文字基线对齐，底部空白就是基线与底线的距离

解放方案：

-方案一： 父元素设置字体大小为0
-方案二： 给行内块元素本身设置 vertical-align 值不是 baseline
-方案三： 如果是图片，可以给图片设置成块级

③ 文字内容个数不同的行内块元素水平排列无法对齐

产生原因：

默认情况下，行内块元素会让里面的文字与外面文字基线对齐
① 如果有一行文字，就是该行文字与外面文字基线对齐
② 如果有多行文字，最后一行文字与外面文字基线对齐
③ 如果没有文字，自己的底部与外面文字基线对齐

解决方案：

给行内块元素设置 vertical-align，值不是 baseline