Warum ist mein Präzisionsweblayout ungenau?

Question

Ich habe ein Problem beim Ändern von HTML mit Javascript. Ein Beispiel finden Sie hier: https://jsfiddle.net/02mwyvyo/

Mein Ziel ist es, ein bestimmtes Element auf der Seite zu verschieben. Ich versuche dies durch Einfügen eines Abstandhalters div vor dem Zielelement. Die Stilattribute des Spacers div sind style="display: inline-block; width=1px; height=100px;". Hier

ist der Code, ich verwende:

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)) 
} 

Und hier sind die CSS-Eigenschaften zu div angewendet:

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

Wenn ich den Code oben laufen, das ist, was ich sehe in der Konsole:

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

Beachten Sie, dass die alte obere Position 26 ist, also erwarte ich, dass das neue Top 126 sein wird, aber es ist i s 112.

Warum passiert das? Was kann ich tun, um es zu korrigieren?

Answer 1

Sie einfügen tatsächlich den Abstandhalter div zwischen Einige Text und Noch mehr Text. Da es ein inline-block ist, wird es am Ende der ersten Zeile angehängt.