1. 元素之间的空白问题
产生的原因:
行内元素、行内块元素,彼此之间的换行会被浏览器解析为一个空白字符。
解决方案:
- 方案一: 去掉换行和空格(不推荐)。
- 方案二: 给父元素设置 font-size:0,再给需要显示文字的元素,单独设置字体大小(推荐)。
2. 行内块的幽灵空白问题
产生的原因:
行内块元素与文本的基线对齐,而文本的基线与文本最底端之间是有一定距离的。
解决方案:
- 方案一: 给行行内块设置vertical ,值不为 baseline 即可,设置为 middle 、bottom 、top 均可。
- 方案二: 若父元素中只有一张图片,设置图片为 display:block 。
- 方案三: 给父元素设置 font-size: 0 。如果该行内块内部还有文本,则需单独设置font-size 。