当前位置:Web前端 > css> 正文

去除inline-block元素间的间隙

时间:2015-7-7类别:Web前端

去除inline-block元素间的间隙

去除inline-block元素间的间隙

一、什么是inline-block

 

inline-block 即内联块,在CSS的元素分类中可以分成三种:行内元素或者内联元素、块级元素、以及内联块元素。

内联块元素具有了内联元素以及块级元素的特性

(1)元素之间可以水平排列

(2)可以当做一个块级元素来设置各种的属性,例如:width、height、padding等。

 

例如

  •  
  • 
    <li id="demo">
        <span>我是一个span</span>
        <span>我是一个span</span>
        <span>我是一个span</span>
        <span>我是一个span</span>
    </li>
    <style>
    #demo span{
        display:inline-block;
       background:#ddd;
    }
    </style>
    
    		
  • 效果图

     

    二、去除inline-block元素间的间隙的方法

     

    方式一:移除标签间的空格

     

  • (1)、写法一

  • <li class="demo">
            <span>我是一个span</span><span>我是一个span</span><span>我是一个span</span><span>我是一个span</span>
        </li>
    					

     

  • (2)、写法二

  • <li class="demo">
            <span>我是一个span
            </span><span>我是一个span
            </span><span>我是一个span
            </span><span>我是一个span</span>
        </li>
    				
  • (3)、利用HTML注释标签

  • <li class="demo">
            <span>我是一个span</span><!-- 
            --><span>我是一个span</span><!-- 
            --><span>我是一个span</span><!-- 
            --><span>我是一个span</span>
        </li>
    				
  •  

    方式二、使用margin负值

    margin负值的大小与上下文的字体和文字大小相关

  •  
  • 
    
    <li class="space">  
        <a href="##">惆怅</a>  
        <a href="##">淡定</a>  
        <a href="##">热血</a>  
    </li> 
    
    <style>
    .space a {  
        display: inline-block;  
        margin-right: -3px;  
    }  
    </style>
    
    		
  •  

    方式三、使用font-size:0

  •  
  • 
        <li class="demo">
            <span>我是一个span
            <span>我是一个span
            <span>我是一个span
            <span>我是一个span</span>
        </li>
    
        <style>
        .demo {font-size: 0;}
        .demo span{
             background:#ddd;
             display: inline-block;
             font-size: 14px; /*要设置相应的字号*/
        }
        </style>
    
    		
  • 对于Chrome, 其默认有最小字体大小限制,考虑到兼容性,需要取消字体大小限制,这样写:

  •  
  • 
        <li class="demo">
            <span>我是一个span
            <span>我是一个span
            <span>我是一个span
            <span>我是一个span</span>
        </li>
       
        <style>
        .demo {font-size: 0;-webkit-text-size-adjust:none;}
        .demo span{
             background:#ddd;
             display: inline-block;
             font-size: 14px; /*要设置相应的字号*/
        }
        </style>
    
    		
  •  

    标签:
    上一篇下一篇

    猜您喜欢

    热门推荐