当前位置：Gxlcms > html代码 > 影响布局的inline-block的空白符的问题_html/css_WEB-ITnose

影响布局的inline-block的空白符的问题_html/css_WEB-ITnose

时间：2021-07-01 10:21:17 帮助过：29人阅读

　　昨天切页面时，进行布局时，想改变以下方法换换口味，所以就抛弃了float方法，采用了display:inline-block方法，没想到却随之而来的带来了一个想不通的问题，那就是空白。废话不多说，上代码。

inline-block的空白符              li
        li
        li
        li

效果如上图所示，每个li之间都会有空格，这影响到我们对页面的布局。

一、造成的原因

inline-block水平呈现的元素之间，如果有换行或空格分隔，那么元素之间会有间距。

二、解决的方法

1、去除元素间的空白或者换行

inline-block的空白符             li
li
li
li

inline-block的空白符                      li
        li
        li
        li

inline-block的空白符              li
li
li
li

inline-block的空白符              li
li
li
li

2、利用margin负外边距

inline-block的空白符              li
        li
        li
        li

3、因为空白字符也是字符，所以可以设置父元素的font-size：0，子元素重新定义font-size大小；但是这种方法在Safari中是无效的。

inline-block的空白符              li
        li
        li
        li

4、使用letter-spacing

inline-block的空白符              li
        li
        li
        li
    


//Opera浏览器下问题：最小间距1像素，然后，letter-spacing再小就还原了

5、使用word-spacing

inline-block的空白符              li
        li
        li
        li

人气教程排行