問題描述
在學udemy的html&css課的時候,challenge2有一部分是給超鏈接添加margin-top/bottom,添加後瀏覽器devtool的樣式中顯示margin已生效,但是在頁面中卻無法顯示。


解決過程
搜索margin不生效的幾個原因可以總結為
- parent box 放不下
- 上下相鄰的塊產生margin摺疊
但是前者一般對parent中頭尾的child產生影響,後者就算髮生摺疊瀏覽器的devtool也會顯示margin(如圖)
![image]()
一番搜索之後,發現<a>屬於塊級元素,上下的margin和padding不生效,行內元素和塊級元素詳細內容見:https://www.cnblogs.com/WebShare-hilda/p/4708381.html
總結
儘量不要把strong em a等行內元素作為排版單元使用,僅僅作為調整內容樣式的工具,他們無法調整寬高(除了img,它是特殊的行內元素)
