元素之间的空白问题

1. 元素之间的空白问题

产生的原因:

行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符。

解决方案：

1. 方案一： 去掉换行和空格（不推荐）。
2. 方案二： 给父元素设置 font-size:0，再给需要显示文字的元素，单独设置字体大小（推荐）。

2. 行内块的幽灵空白问题

产生的原因:

行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的。

解决方案：

1. 方案一： 给行行内块设置vertical ，值不为 baseline 即可，设置为 middle 、bottom 、top 均可。
2. 方案二： 若父元素中只有一张图片，设置图片为 display:block 。
3. 方案三： 给父元素设置 font-size: 0 。如果该行内块内部还有文本，则需单独设置font-size 。