inline-block元素间的间隙

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之必备良药