Chrome，Safari和Firefox中的内嵌块元素之间的幻影空间

如何去除内嵌块元素之间的幻影空间？Chrome，Safari和Firefox中的内嵌块元素之间的幻影空间

这里是一个jsfiddle http://jsfiddle.net/hFDcV/在这里你可以清楚地看到divs之间的水平空间。

而StackOverflow的授权的示例代码：

<div id='row'> 
    <div class='box'>Something</div> 
    <div class='box'>Something</div> 
    <div class='box'>Something</div> 
    <div class='box'>Something</div> 
</div> 

#row { 
    background-color: red; 
} 

.box { 
    width: 150px; 
    height: 150px; 
    background-color: yellow; 
    display: inline-block; 
    margin: 0; 
    padding:0; 
}

来源

2012-11-27 stuartrexking

白色空间在这些元素之间进行渲染。我确信有一个干净的方法可以解决这个问题，但我必须做一些测试才能解决这个问题。 – Shmiddty

http://css-tricks.com/fighting-the-space-between-inline-block-elements/ –

将'float：left;'添加到'.box'类 –

一种解决方案：http://jsfiddle.net/hFDcV/4/

设置父容器的字体大小来0和复位它的子元素。

#row { 
    font-size:0; 
} 

.box { 
    font-size:12pt; 
}

另一种解决方案：http://jsfiddle.net/hFDcV/10/

可以漂浮离开了box元素。在row上设置overflow:hidden;将防止它折叠到0高度。

#row { 
    overflow:hidden; 
} 

.box { 
    float:left; 
}

有梦幻般的文章中的其他解决方案在这个问题上的@RickCalder共享：http://css-tricks.com/fighting-the-space-between-inline-block-elements/

来源

2012-11-27 17:42:39 Shmiddty

将font-size设置为0即可。摆脱空间也是如此。 http://css-tricks.com/fighting-the-space-between-inline-block-elements/ – stuartrexking

@stuartrexking是的，这实际上是我发现这个问题的方法，但是在这样的一个HTML中通常是不可取的方式。 – Shmiddty

一个简单的方法来实现这一目标是插入inline-block的元素之间的解说！

这样的：

<div id='row'> 
    <div class='box'>Something</div><!-- 
    --><div class='box'>Something</div><!-- 
    --><div class='box'>Something</div><!-- 
    --><div class='box'>Something</div> 
</div>

希望这可以帮助别人！

来源

2014-03-12 15:05:51

我不喜欢这种类型的代码，我觉得它很丑。 – Arnold

我同意，但我真的不想写功能的评论。我认为这是一个铬的错误。 – Arnold

Chrome，Safari和Firefox中的内嵌块元素之间的幻影空间

回答

相关问题