内联元素的padding，margin，border等不起作用的原因

最新推荐文章于 2024-01-25 10:55:53 发布

低调的小白

最新推荐文章于 2024-01-25 10:55:53 发布

阅读量5.1k

点赞数 2

分类专栏： css 文章标签：内联元素的padding margin border等不起作用的原因

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

关于内联元素的 padding-top，padding-bottm，margin,border-top,border-bottom 等等，它们并不是没有作用，而是不会影响元素的 line-height，也不会影响其他相邻的元素（上下方向而不是说左右方向）就是说你的上下padding（或者margin，border）设得再大，它的 line-height 是不变的，所以高度上就看不出什么效果。

如下面的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{
            padding:30px;
            background:gray;
            opacity:0.8;
        }
    </style>
</head>
<body>
    <div style="width:300px;height:300px;">一直觉得周星驰是最帅最搞笑的演员一直觉得周星驰是最帅最搞笑的演员一直觉得周星驰是最帅最搞笑的演员一直觉得周星驰是最帅最搞笑的演员我一直觉得周星驰是最帅最搞笑的演员我一直觉得周星驰是最帅最搞笑的演员<span>span测试</span>
    我一直觉得周星驰是最帅最搞笑的演员一直觉得周星驰是最帅最搞笑的演员一直觉得周星驰是最帅最搞笑的演员一直觉得周星驰是最帅最搞笑的演员我一直觉得周星驰是最帅最搞笑的演员我一直觉得周星驰是最帅最搞笑的演员
    </div>
</body>
</html>

可以看出padding上下左右都变大了（从背景中可以很明显的看出），上下的虽然表面上变大了，但是内容并没有被撑开，只有左右两边的内容被撑开了，因为没有影响元素的 line-height，就是说你的上下padding（或者margin，border）设得再大，它的 line-height 是不变的，所以高度上就看不出什么效果。

经测试：行内元素的border和padding效果一样，不支持上下的margin属性