ランダム増加

Question

のdivの高さが700pxに達していない限り、私はこのように、別々のdivに新しいタグを追加しているた後、div要素の中に動的にHTMLタグを追加している：

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>は時々30pxでしばらく時々、0PXによって高さが増加していることがわかります。 これは正常な動作ですか？

EDIT：ライブフィドル：http://jsbin.com/semepejahu/2/edit?html,css,js,console,output

Answer 1

私は、これはここで遊んでCSSの表示値であると思っています。

いくつかの要素にはいくつかのスタイルが組み込まれています。たとえば、h1タグとh4タグを指定するブラウザがいくつかあります。デフォルトではスタイリング。

違いの要点は、インライン要素が並べてあり、ブロックが独自の「線」を得るように設計されていることです。しかし何らかの理由で、これらの2つの値はスタイリングマージンの仕方を完全に変えます。

「br」タグを調べたり照会したりすることができます。いずれの場合も、常に高さが決まっていないことがわかります。この問題が直接起こることはありません。

あなたのフィドルにいくつかのCSSを追加する場合：

h1, h4 { 
    display: inline-block; 
} 

あなたが「BR」タグがより多くの高さに貢献していないに気づくでしょう。

display: block; 

を持つ要素は、余白のこの解釈のために他の要素に対して押し上げたときに、親のdivのサイズが増加します。私たちの 'br'タグのような現実的なサイズの要素さえありません。

しかし、ええ...なぜな量...¯\ _（ツ）_ /¯