行内元素或行内块元素的布局问题和解决方法

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

3.1 文本属性作用于行内元素和行内块元素

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

给行内块或行内元素的父元素设置：

text-align: center;

② 让行内元素或行内块元素垂直居中（在父元素中）

给行内块或行内元素的父元素设置行高，（父元素行高与父元素高度相等）

如果行内块元素中没有文字内容，还要给行内块元素设置 vertical-align: center

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

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

产生原因：

书写代码的时候，每一行代码后面有换行符，换行符被浏览器解析为空白

解决方案：

1. 方案一：每行代码后面不再写换行。
2. 方案二：①给父元素设置字体大小为 0  ② 再单独给行内块元素设置字体大小

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

产生原因：

行内块元素默认沿着文字基线对齐，幽灵空白其实是基线与底线的距离

解决方案：

1. 方案一： 设置父元素字体大小为 0
2. 方案二： 给行内块元素设置 vertical-align，值不能是baseline
3. 方案三： 设置行内块元素为块级元素，适合于图片的幽灵空白。