使用display時爲什麼div之間的空格：inline-block

當使用display: inline-block時，爲什麼div之間有空格，如下例所示：http://jsbin.com/IhULuZO/1/edit。使用display時爲什麼div之間的空格：inline-block

我知道我可以使用float:left，但如果可能的話，我想擺脫沒有浮動元素的空白空間。

2013-10-31 Tamás Pap

可以是[此]（http://stackoverflow.com/questions/1833734/display-inline-block-extra-margin）和[此]（http://stackoverflow.com/questions/14241696/how-to-get-rid-of-space-between-div-when-display-inline-block-and-stacked-horiz）可以幫助你... – Sohail

因爲技術上你的代碼的縮進是一堆空白。

<div class="parent"> 
    <div class="child"></div><div class="child"></div><div class="child"></div> 
</div>

來源

2013-10-31 10:04:35 nicks

是的，當然！謝謝你打開我的眼睛：D –

發生這種情況是因爲您已將.child div分隔開來。如果你將它們寫在同一行上，多餘的空間將被刪除。

<div class="parent"> 
    <div class="child"></div><div class="child"></div><div class="child"></div> 
</div>

來源

2013-10-31 10:05:20 Hiral

這些div之間有一定的空間，使它們更具可讀性。要刪除這些空格，評論在HTML中，所有的空間是這樣的：

<div class="parent"> 
    <div class="child"></div><!-- 
    --><div class="child"></div><!-- 
    --><div class="child"></div> 
    </div>

來源

2013-10-31 10:05:20

您應該刪除空間之間.child的div和代碼應像這些。

<div class="parent"> 
    <div class="child"></div><div class="child"></div><div class="child"></div> 
</div>

來源

2013-10-31 10:41:00

使用display時爲什麼div之間的空格：inline-block

回答

相關問題