inline-block 空白间距问题-html教程-PHP中文网

inline-block 空白间距问题

WBOY

发布： 2016-08-10 08:49:39

原创

1185 人浏览过

一. 问题

元素是inline-block属性时，会有空白间隙

二. 解决方案

1. html方式

1）将元素之间的空隙去除

<span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="space"</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="##"</span><span style="color: #0000ff">>A</span><span style="color: #0000ff"></span><span style="color: #800000">a
    </span><span style="color: #0000ff">><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="##"</span><span style="color: #0000ff">><font color="#000000">B</font></span><span style="color: #0000ff"></span><span style="color: #800000">a
    </span><span style="color: #0000ff">><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="##"</span><span style="color: #0000ff">><font color="#000000">C</font></span><span style="color: #0000ff"></span><span style="color: #800000">a</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span></span></span></span></span>

登录后复制

2）省略闭合标签

<span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="space"</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="##"</span><span style="color: #0000ff">><font color="#000000">A</font></span><span style="color: #000000">
    </span><span style="color: #0000ff"><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="##"</span><span style="color: #0000ff">><font color="#000000">B</font></span><span style="color: #000000">
    </span><span style="color: #0000ff"><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="##"</span><span style="color: #0000ff">><font color="#000000">C</font></span><span style="color: #0000ff"></span><span style="color: #800000">a</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span></span></span></span></span>

登录后复制

2. css方式

1. 使用margin负值（不同浏览器margin-right值可能不一样）

<span style="color: #800000">.space a </span>{<span style="color: #ff0000">
    display</span>:<span style="color: #0000ff"> inline-block</span>;<span style="color: #ff0000">
    margin-right</span>:<span style="color: #0000ff"> -3px</span>;
}

登录后复制

2. font-size：0(IE7会有1px的间隙)

<span style="color: #800000">.space </span>{<span style="color: #ff0000">
    font-size</span>:<span style="color: #0000ff"> 0</span>;

登录后复制

}<span style="color: #800000">
.space a </span>{<span style="color: #ff0000">
    font-size</span>:<span style="color: #0000ff"> 12px</span>;
}

登录后复制

3. letter-spacing负值（Opera浏览器最小间距1px，letter-spacing再小就还原了）

<span style="color: #800000">.space </span>{<span style="color: #ff0000">
    letter-spacing</span>:<span style="color: #0000ff"> -3px</span>;
}<span style="color: #800000">
.space a </span>{<span style="color: #ff0000">
    letter-spacing</span>:<span style="color: #0000ff"> 0</span>;
}

登录后复制

4. word-spacing负值

<span style="color: #800000">.space </span>{<span style="color: #ff0000">
    display：inline-table；(为了兼容Chrome)</span>

登录后复制

<span style="color: #ff0000">    word-spacing</span>:<span style="color: #0000ff"> -6px</span>;
}<span style="color: #800000">
.space a </span>{<span style="color: #ff0000">
    word-spacing</span>:<span style="color: #0000ff"> 0</span>;
}

登录后复制

三. inline-block和baseline

https://segmentfault.com/a/1190000002668492