存叭 发表于 2025-8-23 00:20:16

上下margin无法生效的一种情况-行内元素

问题描述

在学udemy的html&css课的时候，challenge2有一部分是给超链接添加margin-top/bottom,添加后浏览器devtool的样式中显示margin已生效，但是在页面中却无法显示。


解决过程

搜索margin不生效的几个原因可以总结为

[*]parent box 放不下
[*]上下相邻的块产生margin折叠
但是前者一般对parent中头尾的child产生影响，后者就算发生折叠浏览器的devtool也会显示margin（如图）

一番搜索之后，发现属于块级元素，上下的margin和padding不生效，行内元素和块级元素详细内容见:https://www.cnblogs.com/WebShare-hilda/p/4708381.html
总结

尽量不要把strong em a等行内元素作为排版单元使用，仅仅作为调整内容样式的工具，他们无法调整宽高（除了img，它是特殊的行内元素）

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

孙淼淼 发表于 2025-12-10 21:37:48

鼓励转贴优秀软件安全工具和文档！

背竽 发表于 2025-12-20 10:14:15

新版吗？好像是停更了吧。

阜逐忍 发表于 2025-12-20 19:17:02

这个好，看起来很实用

敞撬 发表于 2025-12-27 10:48:22

热心回复！

冷晓晴 发表于 2025-12-31 03:17:21

收藏一下   不知道什么时候能用到

黎娅茜 发表于 2026-1-19 01:13:41

过来提前占个楼

神泱 发表于 2026-1-20 02:23:48

yyds。多谢分享

炀餮氢 发表于 2026-1-21 08:17:12

东西不错很实用谢谢分享

悯拄等 发表于 2026-1-22 15:12:55

感谢，下载保存了

靳谷雪 发表于 2026-1-24 12:34:28

过来提前占个楼

欧阳梓蓓 发表于 2026-1-25 10:18:09

这个好，看起来很实用

致掣 发表于 2026-1-26 05:18:42

yyds。多谢分享

绘纵 发表于 2026-1-27 04:31:24

感谢分享

尸酒岐 发表于 2026-1-27 07:33:54

鼓励转贴优秀软件安全工具和文档！

接快背 发表于 2026-1-29 02:04:31

感谢分享

葛雅隽 发表于 2026-1-31 20:47:42

感谢分享，下载保存了，貌似很强大

热琢 发表于 2026-2-1 01:05:15

感谢发布原创作品，程序园因你更精彩

季卓然 发表于 2026-2-4 06:53:25

东西不错很实用谢谢分享

崆蛾寺 发表于 2026-2-8 06:28:01

东西不错很实用谢谢分享
页: [1] 2
查看完整版本: 上下margin无法生效的一种情况-行内元素