內聯元素的padding，margin，border等不起作用的原因【轉載】
轉自 http://bbs.blueidea.com/thread-2705477-1-1.html （old9的帖子）
關於內聯元素的 padding，margin，border 等等，它們並不是沒有作用，而是不會影響元素的 line-height，就是說你的上下padding（或者margin，border）設得再大，它的 line-height 是不變的，所以高度上就看不出什麼效果。
用樓主的例子來說一下，這裏我把背景色換成了邊框便於觀察：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>span問題</title>
<style type="text/css">
span{
padding:20px;
color:red;
border:2px solid red;
}
</style>
</head>
<body><p style="width:18em; color:#999;">
關於內聯元素的 padding，margin，border 等等，它們並不是沒有作用，而是不會影響 line-height，就是說你的上下 padding（或者margin，border）設得再大，它的 line-height 是不變的，所以高度上就看不出什麼效果。用樓主的例子來說一下
<span>測試span</span>
關於內聯元素的 padding，margin，border 等等，它們並不是沒有作用，而是不會影響 line-height，就是說你的上下padding（或者margin，border）設得再大，它的 line-height 是不變的，所以高度上就看不出什麼效果。用樓主的例子來說一下
</p>
</body>
</html>
可以看到 padding 是起作用的，但上下的文字並沒有撐開——因爲 line-height 沒變。
樓主的例子文字不夠多，所以看不出效果，看起來似乎是 padding 沒起作用，其實是 IE 按照 line-height 把多於的 padding 給切掉了。下面的例子在 firefox 和 IE 下比較一下就可以看出爲什麼了：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>span問題</title>
<style type="text/css">
span{
padding:50px; background-color:#666666; color:#FFFFFF; margin:50px;
}
p{border:1px solid red;}
</style>
</head>
<body>
<p style="width:350px;"><span>測試span</span>asdasdasd無標題文檔</p></p>
</body>
</html>
