为什么a标签不能设置宽高？

最新推荐文章于 2023-03-31 16:35:06 发布

原创最新推荐文章于 2023-03-31 16:35:06 发布 · 3.8k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

本文介绍了解决a标签设置宽高无效的问题，通过将其转换为块元素的方法，使用display:inline-block;实现预期效果。

给a标签设置了css样式：width:200px;height:50px;，它依然不变。因为a标签是行内元素，所以给它设置宽高的时候，首先要把它转换为块元素，代码如下：


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            a{border:1px solid red;width:200px;height:50px;display:inline-block;}
        </style>
    </head>
    <body>       
        <a>a元素</a>        
    </body>
</html>

display:inline-block;就可以将它转换成快元素了，span元素也是如此。