inline-block元素间的间隙

css

inline-block元素之间莫名其妙的出现了空格（在没有主动设置任何间隔情况下），这个问题在css-trick上找到solution。

  • 表现：
    inline-block出现的间隙

  • 原因：
    原因是html中元素之间有空格…

  • 解决方案：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    方案1：
    <ul>
        <li>
        one</li><li>
        two</li><li>
        three</li>
    </ul>
    方案2：
    <ul>
        <li>one</li
        ><li>two</li
        ><li>three</li>
    </ul>
    方案3：
    <ul>
        <li>one</li><!--
        --><li>two</li><!--
        --><li>three</li>
    </ul>
    //总之就是去掉html元素之间的空格即可，抑或用float和flexbox替代

没多少东西资料奉上
css-tricks真乃css之必备良药