本文导读

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

问题描述

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

20250911-172018.jpeg


解决过程

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

  1. parent box 放不下

  2. 上下相邻的块产生margin折叠
    但是前者一般对parent中头尾的child产生影响,后者就算发生折叠浏览器的devtool也会显示margin(如图)

3501465-20250822172642821-1339174294.png

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

总结

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

本站提供的所有下载资源均来自互联网,仅提供学习交流使用,版权归原作者所有。如需商业使用,请联系原作者获得授权。 如您发现有涉嫌侵权的内容,请联系我们 邮箱:[email protected]