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

最新推荐文章于 2025-09-12 13:16:34 发布

weixin_30435261

最新推荐文章于 2025-09-12 13:16:34 发布

阅读量56

点赞数

CC 4.0 BY-SA版权

文章标签： php

原文链接：http://www.cnblogs.com/dragonlong/p/4596237.html

本文介绍了在不同浏览器中处理inline-block元素之间的间隙问题的方法。包括去除标签间的空格、使用负margin、设置font-size为0等技巧。

对于inline-block元素，如几个设置为display：inline-block的span元素，在ie6、7中显示无间隙，在其他ie版本和高级浏览器中显示有间隙。

<div>
    <span></span>
    <span></span>
</div> 

span{
    width: 50px;
    height: 50px;
    border: 1px solid red;
    display: inline-block;
　　 vertical-align:top;(防止因span里面字体太多而两span间上下错位)
}

下图：除ie6、7外的高级浏览器中显示

方法一：

元素之间有间隙，是因为标签之间有空格，去掉空格即可

<div>
    <span></span><span></span>
</div>

或者借助HTML注释

<div>
    <span></span><!--
    --><span></span>
</div>

方法二：

使用margin-right

span{
    display: inline-block;
    margin-right:-8px;
}

margin-right的值大小要视span的父元素div字体类型、大小而定。

参考

http://www.zhangxinxu.com/wordpress/2010/11/%E6%8B%9C%E6%8B%9C%E4%BA%86%E6%B5%AE%E5%8A%A8%E5%B8%83%E5%B1%80-%E5%9F%BA%E4%BA%8Edisplayinline-block%E7%9A%84%E5%88%97%E8%A1%A8%E5%B8%83%E5%B1%80/

方法三：

使用font-size：0

方法二中提到margin-right的值要看父元素div而定，故可以联想到使用fon-size：0消除间隙

div{
    font-size:0;
}
span{
    font-size:12px;
}

方法四：

使用letter-spacing(字符间距)

div{
    letter-spacing:-8px;
}
span{
    letter-spacing:0;
}

具体div的letter-spacing值是多少，视字体而定

方法五：

使用word-spacing（单词间距）

div{
    word-spacing:-8px;
}
span{
    word-spacing:0;
}

方法六：

div{
    display:inline-table; || display:table; 
}

方法七：

span{float:left;}

转载于:https://www.cnblogs.com/dragonlong/p/4596237.html