去除inline与inline-block间隙

发表于 | 分类于

inline 元素之间或者 inline-block 元素之间都存在空隙。

1
2
3
4
5
6
7
8
9
10
11
<body>
    <span>span</span>
    <span>span</span>
    <span>span</span>
    <span>span</span>

    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
</body>

1
2
3
4
span {
    background: #b72afc;}
button {
    background: #23d2fc;}

空隙的原因为标签之间空格或者回车导致的

方法一 去掉标签之间空格及换行

1
2
3
4
5
<body>
    <span>span</span><span>span</span><span>span</span><span>span</span>

    <button>button</button><button>button</button><button>button</button><button>button</button>
</body>

或

1
2
3
4
5
6
7
8
9
10
11
<body>
   <span>span</span><!--
--><span>span</span><!--
--><span>span</span><!--
--><span>span</span>

   <button>button</button><!--
--><button>button</button><!--
--><button>button</button><!--
--><button>button</button>
</body>

1
2
3
4
span {
    background: #b72afc;}
button {
    background: #23d2fc;}

方法二 取消标签闭合

1
2
3
4
5
6
7
8
9
10
11
<body>
    <span>span
    <span>span
    <span>span
    <span>span</span>

    <button>button
    <button>button
    <button>button
    <button>button</button>
</body>
1
2
3
4
span {
    background: #b72afc;}
button {
    background: #23d2fc;}

方法三 对父元素使用font-size:0

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
    <div>
        <span>span</span>
        <span>span</span>
        <span>span</span>
        <span>span</span>
    </div>
    <div>
        <button>button</button>
        <button>button</button>
        <button>button</button>
        <button>button</button>
    </div>
</body>
1
2
3
4
5
6
7
8
div {
    font-size: 0;}
span {
    background: #b72afc;
    font-size: 16px;}
button {
    background: #23d2fc;
    font-size: 16px;}

效果：