CSS display:inline-block出现的空格间距

来源:未知 人浏览 2017.08.10

inline-block结合了inline和block的特点,

举例说明:如果做横向菜单的时候,如果设置了inline-block属性的元素,就可以不需要float:left来实现了。

html代码

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

css代码

html,body,span,ul,li{margin: 0;padding:0;}
ul,li{ list-style: none;}
ul li{border:1px solid #ececec;padding: 5px 10px; display: inline-block;}

显示效果

可以看到li标签并排显示出来,

但是每个li之间却多出了空格,在IE8+,FF和Chrome的浏览器中都出现了这个问题,不能忍啊!


其实是空白符搞的鬼

在浏览器中,空白符是不会被浏览器忽略的,多个连续的空白符浏览器会自动将其合并成一个。我们编写代码时写的空格,换行都会产生空白符。所以自然而然的两个元素之间会有空白符,如果将上述例子中的li标签写成一行,空白符消失,就会消除间隙。

<ul>    
    <li>1</li><li>2</li><li>3</li><li>4</li>
</ul>

显示效果

如何真正消除空白符呢?

要去除空白符产生的间隙,首先要理解空白符归根结底是个字符,通过设置font-size属性可以控制产生的间隙的大小,font-size:0px;即可消除间距

html代码

<ul>    
    <li>1</li>    
    <li>2</li>    
    <li>3</li>    
    <li>4</li>
</ul>

css代码

ul,li{ list-style: none;}
ul{ font-size:0px;}
ul li{border:1px solid #e1e1e1;padding: 5px 30px; display: inline-block; font-size: 14px;}

显示效果

兼容性问题

在IE8+,FF和Chrome的浏览器,inline-block可以完美的兼容,考虑到IE6和IE7等低版本浏览器的同学们就算了吧...你们就老老实实的用float:left吧~~


星期三
15年12月16日
热门板块
windows 10下载设计软件下载PhotoShop CC文章分享Portraiture磨皮win10安装教程
热门下载
Lightroom 5.2官方中文版下载下载(

Lightroom 5.2官方中文版下载下载(

下载
PhotoShop CC下载官方正版可激活版本

PhotoShop CC下载官方正版可激活版本

下载