您的位置：首页 > Web前端 > css > 正文

去除inline-block元素间的间隙

更多时间：2015-7-7 类别：Web前端浏览量：1456

去除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>

标签：css

上一篇：.NET开发中应该遵循的几个规则

下一篇：移动端web页面使用position:fixed

您可能感兴趣

去除inline-block元素间的间隙

去除inline-block元素间的间隙

热门推荐

排行榜