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元素时，最好从代码中删除换行符，以便所有浏览器都将元素视为相同。然后使用边距或填充来获得精确的间距。

See this CSS Tricks article for more info.

两个div之间的神秘空间

2 个答案: