CSS空白问题

一、元素之间的空白问题

尚硅谷视频链接：131_CSS_元素之间的空白问题_哔哩哔哩_bilibili

产生原因

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

解决方案

1、方案一（不推荐）：去掉换行符和空格。

2、方案二（推荐）：给父元素设置 font-size: 0; ，再给需要显示文字的元素，单独设置字体大小。

二、行内块之间的幽灵空白问题

尚硅谷视频链接：

132_CSS_行内块的幽灵空白问题_哔哩哔哩_bilibili

产生原因

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

解决方案

1、方案一：给行内块设置 vertical, 值不为baseline即可，设置为middle、bottom、top即可。

2、方案二：若父元素中只有一张图片，设置图片为 display:block; 。

3、方案三：给父元素设置 font-size:0;。如果该行内块内部还有文本，则需单独设置font-size，比如通过span元素。