span

最新推荐文章于 2023-06-15 10:43:47 发布

原创最新推荐文章于 2023-06-15 10:43:47 发布 · 213 阅读

0 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

11 篇文章

订阅专栏

本文探讨了HTML中的span元素作为行内元素无法设置宽高的特性，并通过实例展示了尽管span元素自身宽高无效，但其padding属性在水平方向上的应用。通过一个简单的HTML和CSS代码示例，展示了span元素的padding-left和padding-right如何影响布局，同时指出padding-top和padding-bottom在span元素上无效的情况。

span是行内元素，不能设置宽高。
margin padding左右有效，上下无效。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        span{
            background-color: green;
            color: red;
            width: 200px;  /* 不能设置宽高 */
            height: 200px;
            /*margin: 100px;*/
            padding-left: 100px;
            padding-right: 100px;
            padding-top: 100px;
            padding-bottom: 100px;
        }
    </style>
</head>
<body>
<span>hello</span>zzzzzzzzzzzzzzzz
<div>我是div</div>    <!-- 通过验证，发现这里的div会出现的hello下方，说明span的padding-bottom无效 -->

</body>
</html>```