正確なウェブレイアウトが不正確なのはなぜですか？

Question

JavascriptでHTMLを修正する際に問題が発生しました。例はここにあります：https://jsfiddle.net/02mwyvyo/

私の目標は特定の要素をページの下に移動することです。私は、ターゲット要素の前にスペーサーdivを挿入することでこれをしようとしています。スペーサーdivのスタイル属性はstyle="display: inline-block; width=1px; height=100px;"です。

function describeDOMRect(rect) { 
    return "{ top: " + rect.top + ", left: " + rect.left + ", bottom: " + rect.bottom + ", right: " + rect.right + " }" 
} 

function addVerticalSpacer() { 
    var div = document.getElementsByClassName("target-div")[0] 
    var bounds = div.getBoundingClientRect() 

    console.log("old bounds: " + describeDOMRect(bounds)) 

    var spacerHeight = 100 
    var newTop = bounds.top + spacerHeight 
    var spacer = document.createElement("div") 

    spacer.className = "spacer" 
    spacer.setAttribute("style", "display: inline-block; width: 1px; height: " + spacerHeight + "px;") 

    div.parentNode.insertBefore(spacer, div) 

    bounds = div.getBoundingClientRect() 

    console.log("new bounds: " + describeDOMRect(bounds)) 
} 

そして、ここでCSSプロパティがdivに適用されますが：

div { 
    border: none; 
    border-width: 0; 
    padding: 0; 
    margin: 0; 
} 

私は上記のコードを実行すると、これは私が見たものである。ここ

は、私が使用していたコードですコンソール：

old bounds: { top: 26, left: 8, bottom: 26, right: 729 } 
new bounds: { top: 112, left: 8, bottom: 112, right: 729 } 

お知らせ古いトップの位置が26であるので、私は新しいトップが126であることを期待していますが、それ私s 112.

どうしてですか？それを修正するために私は何ができますか？

Answer 1

あなたが実際にいくつかのより多くのテキストいくつかのテキスト間とスペーサーdivを挿入しています。 inline-blockなので、最初の行の最後に追加されます。