关于内联元素的 上下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 是不变的，所以高度上就看不出什么效果。 | 
收藏
淘帖
踩
