css inline-block后有换行符变成空白间隔bug

HTML/CSS 2014-04-28 inline-block,空白间隔,css

以前都使用display:block很少使用display:inline-block,近期写样式有时候为了方便我也使用inline-block,不想竟然有个大问题,每个元素之间多了一个空白,而这个空白正是由于换行导致的:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" /> 
        <style type="text/css"> 
            * {
                margin: 0; 
                padding: 0;
            }

            span {
                margin: 0; 
                padding: 0;
                display: inline-block;
                width: 50px;
                height: 20px;
                background: red;
            } 
        </style>
    </head>
    <body>
        <span></span><span></span>  
        <span></span> 
        <span></span> 
    </body>
</html>

火狐:

IE:

Chrome:

没办法,要想把内联标签表现成块并且不换行只能按照老方法display:block后再float它。

文字链接:《css inline-block后有换行符变成空白间隔bug

文章地址:http://www.qttc.net/201404434.html

除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源

乳名?小名?昵称?网名?均可

email,放心,我不会给你乱投广告的

想获得回访就把你的站点URL写上(没有留空)

[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法

Comments 1

  • 除去换行还有两种方法:1、设置span元素的父元素的font-size:0;再单独设置span的font-size; 2、设置负边距(空白的大小跟默认字体的大小有关)
    2014-06-11 17:02:07 [ 跟帖 ]
    1 #