2格之間的神秘空間

Question

我在進度條旁邊有一組兩個按鈕，對於這些按鈕，它們用<div>包裝：

<div class="block">
    <div class="progress progress-striped active">
        <div class="progress-bar" role="progressbar" style="width: 100%;"></div>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default btn-xs" title="Delete">
            <gly icon="trash"></gly>
        </button>
        <button type="button" class="btn btn-default btn-xs" title="Toggle Repeat">
            <gly icon="repeat"></gly>
        </button>
    </div>
</div>

http://jsfiddle.net/DerekL/M3NnV/

這工作得很好。 請記住，進度條和按鈕組之間有很小的間隙。

這只是一個模板。 我要做的是以編程方式生成以下代碼：

//Code is in the fiddle

http://jsfiddle.net/DerekL/54Jhc/

通過與我的模板進行比較，得到的HTML看起來是相同的。 但是我所說的差距已經消失了。 我嘗試檢查這些元素，看看是什么導致間隙（我希望間隙在其中）出現，但是沒有運氣。 那里沒有邊距，也沒有填充物。

我如何找回我的空間？

Answer 1

在您的HTML代碼示例中，div之間有換行符和空格，以提高可讀性。 這些空格實際上最終成為瀏覽器DOM中的文本節點。 特別是進度條div和按鈕組div之間的空格最終在最終輸出中恰好是一個空格字符。

這不是一個好的設計，但是如果您真的想在代碼中重現它，則可以在兩個div之間添加一個文本節點，如下所示：

space = $(document.createTextNode(" ")).appendTo(block)

不過，我還是建議在進度條上留一個邊距。

Answer 2

通過javascript以編程方式輸出HTML時，它會被最小化-標記之間的所有空白都已被刪除。 大多數瀏覽器都將inline-block元素周圍的空格解釋為不間斷空格（   ），這就是為什么即使實際上沒有指定任何邊距或填充，進度條旁邊也有一個空格的原因。 刪除空白后，瀏覽器將顯示沒有任何間距的元素，並且您的元素看起來彼此齊平。

因此，在處理需要精確間距的inline-block元素時，最好從代碼中刪除換行符，以便所有瀏覽器都將這些元素視為相同。 然后，使用邊距或填充來獲得准確的間距。

有關更多信息，請參見此CSS技巧文章。