动态内容的div高度随机增加

Question

我将html标签动态添加到div中，除非div的高度已达到700px，之后我将新标签添加到单独的div中，如下所示：

while (index < contents.length) {
        var content = contents.eq(index).clone();
        var previousHeight = heightTesterDiv.height();
        heightTesterDiv.append(content);
        var newHeight = heightTesterDiv.height();
        console.log('Div content: '+content[0].outerHTML +' .Div Height Increased: '+(newHeight - previousHeight));

        if (heightTesterDiv.height() > 700) {
             // other code
        }
}

但是，添加标签后高度的增加似乎是随机的：

我们可以看到<br>有时会将高度增加0px，有时增加30px。 这是预期的行为吗？

编辑：活小提琴：http://jsbin.com/semepejahu/2/edit?html,css,js,console,output

Answer 1

我认为这是在这里播放的css显示值。

一些元素带有一些内置样式。例如，某些浏览器给出了h1和h4标签“display：block;”默认样式。

差异的要点是内联元素可以并排，并且块被设计为元素得到它们自己的“线”。但由于某种原因，这两个值完全改变了样式边距的工作方式。

你可以检查/查询'br'标签，并且在任何一种情况下总是发现它们永远不会有高度......所以你知道它们不会直接导致这个问题。

如果你向你的小提琴添加一些css：

h1, h4 {
  display: inline-block;
}

你会注意到'br'标签没有贡献更多的高度。元素

display: block;

由于边距的这种解释，

会导致父div在向上推动其他元素时增大。甚至像我们的'br'标签一样没有实际尺寸的元素。

但是......为什么那些数量......¯\ _（ツ）_ /¯