javascript - 2个div之间的神秘空间

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)

不过，我建议在进度条上留一个边距。