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中的內嵌塊元素之間的幻影空間

回答

相關問題