您的位置：首页 > 其它

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

2016-10-15 12:54 190 查看
关于内联元素的 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属性
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  内联元素的padding margin border等不起作用的原因
相关文章推荐
新的分享
章节导航