去除inline-block元素间的空隙

最新推荐文章于 2024-09-09 21:34:46 发布

guo-snowstorm

最新推荐文章于 2024-09-09 21:34:46 发布

阅读量388

点赞数

分类专栏： CSS 文章标签： html css inline-block

CSS 专栏收录该内容

52 篇文章 0 订阅

订阅专栏

原文链接：http://www.cnblogs.com/2050/archive/2012/05/16/2504081.html

去除inline-block元素间的空隙

inline-block元素在布局时会给我们带来很多方便，但它有一个明显的bug,就是inline-block元素间会有一个4px的间隙（有的浏览器可能是8px）。废话不多说了，直接讲解决方法吧。

总体来时可分为两种方法，一种是改变html结构法,另一种是css法。

先说第一种，比如下面这段代码:

假设 li 是 inline-block元素，则 li 间会出现讨厌的空隙，这时我们可以换个写法：

以上三种写法都是可以的，总之就是避免让 </li>与<li>之间出现书面上的空格。

还有一种写法是去除闭合标签，如：

这种写法因为不符合html规范，所以还是避免使用为好

第二种是css解决方法。思路是把inline-block元素的父元素的font-size设为0，letter-spacing和word-spacing设为负数，然后再在inline-block元素中把这几个值恢复正常即可。（但是实际在chrome中测试时，只需在ul中加上font-size：0即可，这可能是原作者的bug）

 
         ul{ 
        
         font-size 
         : 
         0 
         ; 
        
         letter-spacing 
         : 
         -4px 
         ; 
         /*实际情况下 -4这个值可能还要调整*/ 
        
         word-spacing 
         : 
         -4px 
         ;   
         /*实际情况下 -4这个值可能还要调整*/    
        
         } 
        
         ul li{ 
        
         display 
         :inline-bolck; 
        
         zoom: 
         1 
         ; 
        
         font-size 
         : 
         12px 
         ; 
        
         letter-spacing 
         : 
         normal 
         ; 
        
         word-spacing 
         : 
         normal 
         ; 
        
         }