上下margin无法生效的一种情况-行内元素
<h1 id="问题描述">问题描述</h1><p>在学udemy的html&css课的时候，challenge2有一部分是<code>给超链接添加margin-top/bottom</code>,添加后浏览器devtool的样式中显示margin已生效，但是在页面中却无法显示。</p>
<p><img src="https://img2024.cnblogs.com/blog/3501465/202508/3501465-20250822172158164-1338777874.png"></p>
<p><img src="https://img2024.cnblogs.com/blog/3501465/202508/3501465-20250822172214839-929873650.png"></p>
<h1 id="解决过程">解决过程</h1>
<p>搜索margin不生效的几个原因可以总结为</p>
<ol>
<li>parent box 放不下</li>
<li>上下相邻的块产生margin折叠<br>
但是前者一般对parent中头尾的child产生影响，后者就算发生折叠浏览器的devtool也会显示margin（如图）<br>
<img src="https://img2024.cnblogs.com/blog/3501465/202508/3501465-20250822172642821-1339174294.png"></li>
</ol>
<p>一番搜索之后，发现<code><a></code>属于<code>块级元素</code>，上下的margin和padding不生效，行内元素和块级元素详细内容见:https://www.cnblogs.com/WebShare-hilda/p/4708381.html</p>
<h1 id="总结">总结</h1>
<p>尽量不要把<code>strong</code> <code>em</code> <code>a</code>等行内元素作为排版单元使用，仅仅作为调整内容样式的工具，他们无法调整宽高（除了img，它是特殊的行内元素）</p><br><br>
来源：https://www.cnblogs.com/wdllmh/p/19053205
頁:
[1]