为何 a 标签的 margin-top 生效?
一个 html 页面如下:
<div class="orders pannel"> <div class="pannel_tittle"> <h4>我的订单</h4> <a href="#">查看更多></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,确认了块级元素转换。
© 版权声明
文章版权归作者所有,未经允许请勿转载。
【小浪云服务商 - 服务器12元起 - 挂机宝5元起】
THE END
暂无评论内容