空行主要由默认样式、换行符或对齐机制导致，可通过CSS重置margin、处理行内空白及调整图片对齐方式消除。
HTML元素之间的多余空行通常不是由HTML本身直接导致的，而是由于元素的默认样式、换行符或空白字符在特定显示模式下产生的视觉效果。要清除这些空行，需从HTML结构和CSS样式两方面入手。
理解空行产生的原因
看似多余的空行，多数情况下是以下几种原因造成的：
- 行内元素间的换行与空格：当使用span、a、img等行内元素时，代码中的换行或空格会被浏览器渲染成一个空格，造成间距。
- 块级元素的默认外边距（margin）：如h1、p、div等标签自带上下margin，容易形成“空行”感。
- 图片底部的空白间隙：图片默认为基线对齐（baseline），下方会留出空间容纳文字下降部分，看起来像多了空行。
使用CSS重置默认间距
最有效的方法是通过CSS控制元素的外边距和内边距：
- 将不需要间距的块级元素的margin设为0：
h1, p, ul, li { margin: 0; } - 使用CSS重置样式表或通用选择器快速清理：
* { margin: 0; padding: 0; box-sizing: border-box; } - 针对特定布局关闭不必要的间距，尤其是列表和标题元素。
处理行内元素间的空白
多个span或img并排显示时，代码换行会产生间隙。解决方法包括：
立即学习“前端免费学习笔记（深入）”；
- 将元素写在同一行：AB
- 使用CSS设置父容器字体大小为0，再为子元素单独设置字体：
.container { font-size: 0; } span { font-size: 16px; } - 将display改为flex，彻底规避空白问题：
.container { display: flex; }
修复图片下方空白
图片即使没有设置margin或padding，也可能出现底部空隙：
- 设置vertical-align: top;或middle：
img { vertical-align: top; } - 将图片设为display: block;，避免行内对齐问题。
- 确保父容器line-height合适，避免继承异常行高。
基本上就这些。关键在于识别空行来源——是CSS默认样式、文本节点空白，还是对齐机制。针对性地用CSS调整，就能干净地消除多余视觉空行。
