• 关于margintop/bottom在nonReplaced inline元素上不起作用的解释


    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 的四个属性都在replaced inline有效

    后续http://www.cssass.com/blog/index.php/2009/121.html

  • 相关阅读:
    命令行
    作业三C++
    作业二
    0003---简单的a+b问题
    0002---五层小山
    0001---Hello world
    关于OJ的那些事
    CDQ分治学习笔记
    C++ IO的一些注意点
    Vscode配置C++环境
  • 原文地址:https://www.cnblogs.com/youxin/p/2650377.html
Copyright © 2020-2023  润新知