超链接默认上下间距主要来自父段落p的margin-top和margin-bottom（各约1em），而非a标签自身；行内场景下line-height和baseline对齐也会产生视觉空隙；需分层清除父容器margin、控制line-height与vertical-align、处理html空白字符，而非仅重置a的margin。
超链接默认上下间距怎么来的
浏览器给 a 标签本身不设 margin，但你在段落里写 <p>@#@#@#@#@#@#@#@#@#@0</p>，真正撑开上下空隙的其实是 p 的默认 margin-top 和 margin-bottom（各约 1em）。另外，如果 a 是行内元素，又嵌在有 line-height 的容器中，垂直方向还可能因基线对齐（baseline）和行高叠加产生“视觉空隙”。
常见错误现象：
- 单独给
a { margin: 0; }完全没用——它本来就没 margin - 清了
p的 margin 却发现链接还是离上一行文字有距离——那是line-height在起作用 - 多个
a并排时中间有小空隙——其实是 HTML 源码里的换行符被渲染成空格
消除 a 周围多余空隙的实操组合拳
不是单点清除，而是分层处理：父容器、自身行内行为、相邻空白字符。必须一起动，否则总有一处漏网。
- 先清父级块元素的 margin：
p, h1, h2, h3, h4, h5, h6 { margin: 0; }，或至少p { margin-bottom: 0; }配合:first-child控制首段 - 若
a独占一行且要居中，建议包一层div或直接设display: block;+text-align: center;，避免依赖行内对齐逻辑 - 处理行内空白：把
a标签写成连在一起的形式<a>1</a><a>2</a><a>3</a>，或给父容器设font-size: 0;，再给a单独设回字体大小 - 防 baseline 漂移：加
vertical-align: top;或middle;（尤其当旁边有图片或span时）
紧凑排版下 a 的 padding 和 line-height 怎么调
想让链接文字紧贴上下边界，不能只盯着 margin。padding 和 line-height 才是控制“文字到边框”距离的关键。
-
a { padding: 0; }必须写——有些浏览器（如旧版 Safari）会给a加默认 padding -
line-height: 1;或line-height: normal;更安全；设成像素值（如line-height: 16px;）容易在子元素字体变大时卡死高度 - 如果用了
display: inline-block;，务必加vertical-align: middle;，否则默认 baseline 对齐会留出下降部空隙 - 注意
box-sizing: border-box;—— 否则加 border 后整体高度会意外变大
为什么用 * { margin: 0; padding: 0; } 反而更难调
通配符看着省事，实际会让调试变得更模糊。比如你发现某个 a 下方突然多出空隙，排查时得回头翻所有祖先元素是否被重置过 padding/margin，而它们本不该被影响。
-
textarea、select、button清掉 padding 后点击热区严重缩水 -
pre、blockquote失去语义化呼吸感，阅读体验变差 - 真正需要紧凑的只是特定区域（如导航栏、标签云），应局部控制：
.nav a { ... }而非全局污染
最易被忽略的是：空隙往往不在 a 上，而在它的父容器、兄弟元素、甚至 body 的默认 margin 里。调样式前，先用开发者工具逐层检查 computed styles，比猜更快。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
