为什么 a 标签的 margin-top 在该例子中生效？

为何 a 标签的 margin-top 生效？

一个 html 页面如下：

<div class="orders pannel">     <div class="pannel_tittle">         <h4>我的订单</h4>         <a href="#">查看更多&gt;</a>     </div> </div>

对应 css 代码：

.pannel .pannel_tittle a {     margin-top: 8px;     font-size: 16px;     color: #999; }

为什么 a 标签的 margin-top 生效？一般来说，a 标签是行内元素，而 margin-top 仅对块级元素生效。为了解释此现象，我们需要深入了解元素 display 属性的设置。

默认情况下，a 标签是行内元素。但是，我们可以使用 CSS 的 display 属性将其转换为块级元素。在这个例子里，查看更多> 链接的 CSS 规则时，可以看到以下属性：

a {     display: block; }

此属性将 a 标签转换为块级元素，从而允许其使用 margin-top。

我们可以使用浏览器的开发者工具来验证此转换。检查元素样式时，可以看到 Computed 选项卡中 a 标签的 display 属性值为 block，确认了块级元素转换。