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

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了。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

李发展

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值