黑马程序员技术交流社区

标题: 【广州python】内联元素的padding，margin，border等不起作用 [打印本页]

作者: 丁柳 时间: 2018-12-20 11:31
标题: 【广州python】内联元素的padding，margin，border等不起作用
关于内联元素的上下padding，margin,border ，它们并不是没有作用，而是不会影响元素的 line-height，也不会影响其他相邻的元素，上下padding（或者margin，border）设得再大，它的 line-height 是不变的，所以高度上就看不出什么效果，但是设置元素的背景颜色可看出效果，如下面的代码

[HTML] 纯文本查看 复制代码

<!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 是不变的，所以高度上就看不出什么效果。

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2