三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之

关于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就生效了吧.

不过,等下,为什么在这里对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是不是就看不出有“上边距”了。

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

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

标签: , ,

2 条评论 发表在“关于margin-top/bottom在non-Replaced inline元素上不起作用的解释”上

  1. dylan 说:

    ):7:(

    不错…学习了

    回复

留下回复

):9:( ):8:( ):7:( ):6:( ):5:( ):4:( ):3:( ):2:( ):20:( ):1:( ):19:( ):18:( ):17:( ):16:( ):15:( ):14:( ):13:( ):12:( ):11:( ):10:(