关于内联元素的 上下padding，margin,border ，它们并不是没有作用，而是不会影响元素的 line-height，也不会影响其他相邻的元素，上下padding（或者margin，border）设得再大，它的 line-height 是不变的，所以高度上就看不出什么效果，但是设置元素的背景颜色可看出效果，如下面的代码
[HTML] 纯文本查看 复制代码
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
<!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 是不变的，所以高度上就看不出什么效果。
更多技术资讯可关注：gzitcast