关于margin-top/bottom在non-Replaced inline元素上不起作用的解释

关于margin-top/bottom在non-Replaced inline元素上不起作用的解释
作者：Neoxone 发表时间： 2009年02月27号，星期五阅读：9,447 次

margin-top/bottom have no effect on non-replaced inline elements。（参见css2.1规范）
但是为什么就不支持呢？
本人觉得可以这样解释：

像这样一个结构
<span class=”a”>xxxxxxxxxxxxxxxx</span><span class=”b”>——————</span>

效果大概如下
xxxxxxxxxxxxxxx————-

假如inline元素支持margin-top，而margin-top的参照基准是前一个元素（当然，考虑复杂情况的话，这么说是不正确的,比如前一元素是脱离文档流的元素，或者根本没有前一元素而只有上级元素，等等）。那么给b相对a的设置一个margin-top值，这个效果会是怎么呢？

这样？
xxxxxxxxxxxxxxx
————-

还是这样？
xxxxxxxxxxxxxxx
————-

但不管是怎样，这都和inline元素的定义相悖。inline元素，从字面上就可以理解，他是在(in)一行(line)上的！
这就是为什么inline元素当初设计的时候不让它支持margin-top/bottom。

同样他（非可置换inline元素）也不支持height（和width）。取而代之的是line-height，意思就是行高。因为inline元素是一行行的，定一个height的话，那这到底是整段inline元素的高呢？还是inline元素一行的高呢？都说不过去啊！所以统一都给每行定一个高，这就是line-height了。

虽然no-replaced inline元素都不支持margin属性。
但margin对于可置换inline元素还是有效的.(Replaced element )

例如下，下面的margin-top/bottom就生效了吧.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>可置换inline元素的margin效果</title>
<style type="text/css">
*{margin:0; padding:0; }
.inputButton{margin-top:100px;}
</style>
</head>
<body>
<div style="border:1px solid red;">
	<input type="text" class="inputText" /><input type="button" value="提交" class="inputButton" />
</div>
</body>
</html>

不过，等下，为什么在这里对inputButton设置margin-top后inputText也跟着有了上边距了呢？
其实，对于可置换inline元素的margin作用基线和block元素又不一样，他并非是任意的前面那个元素，而是离他最近的前一个block元素。
而且，对于元素有一个默认的vertical-align值。
ie下有可能是：vertical-align:auto; （但标准css规范中并无auto这个值）
而FF等浏览器下是vertical-align:baseline;（规范中所定义）

我们给input这个可置换inline元素设置个vertical-align:top;看看，前面的inputText是不是就看不出有“上边距”了。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>可置换inline元素的margin效果</title>
<style type="text/css">
*{margin:0; padding:0; }
input{vertical-align:top;}
.inputButton{margin-top:100px;}
</style>
</head>
<body>
<div style="border:1px solid red;">
	<input type="text" class="inputText" /><input type="button" value="提交" class="inputButton" />
</div>
</body>
</html>

有时候，margin的值在不同浏览器下会产生不同的结果。
比如这个：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8" />
<title>可置换inline元素的margin效果</title>
<style type="text/css">
*{margin:0; padding:0; }
.inputButton{margin-top:-100px;}
</style>
</head>
<body>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div style="border:1px solid red;">
	<input type="text" class="inputText" /><input type="button" value="提交" class="inputButton" />
</div>
</body>
</html>

对比下ie和FF的差别，我们会发现在，ＦＦ下这个margin负值似乎没起作用啊。
其实是vertical-align值（有默认值）在不同浏览器下解释有差别的缘故。
你可以修改input的vertical-align值做下测试。