为什么 a 标签可以设置 margin-top？

图示a标签中margin-top值有效的疑虑

在一段html和css代码中，我们看到一个具有 “margin-top” 值的标签，这引起了我们的疑问：标签作为行内元素，为何可以拥有垂直边缘距？

揭示谜底：从块元素的转变

默认情况下，标签是一个行内元素，这意味着它不能像块元素那样占据整个宽度或设置垂直边缘距。然而，在提供的CSS代码中，我们添加了以下规则：

.pannel .pannel_tittle a {     display: block; }

display属性的魔法

“display“属性可以让标签从行内元素转变为块元素。一旦变为块元素，标签就开始遵循块元素的规则，包括能够设置”margin-top”值。

验证转变

使用浏览器开发者工具，我们可以检查标签在应用CSS规则后的实际表现。在”Computed”标签下，我们可以看到”display”属性值为”block”，这意味着标签已成功转变为块元素，其”margin-top”值因此生效。