CSS reserviert einen unbekannten Speicherplatz in Box-Modell

Question

Ich habe eine <div> mit etwas Text erstellt. Ich setze die Breite und das Auffüllen des <div> und die Schriftgröße des Textes darin. Unten ist ein Ausschnitt des Konflikts zusammenfasst:

.container { 
 
    width:  300px; 
 
    padding: 10px; 
 
    font-size: 16px; 
 
}

<div class="container"> 
 
    Hello 
 
</div>

Nach dem Code, die Gesamthöhe (die die offset in Javascript ist) ist 36. Allerdings, wenn ich an das Layout in Chrome aussehen Dev-Tools, die Höhe liest 38. Also, woher kamen diese 2px?

Answer 1

ändern. Die zusätzliche Höhe wird durch die line-height Eigenschaft verursacht.

Der Anfangswert von line-height ist normal.

Dies, according to the spec, weist Browser an, den Wert auf 1,2 zu setzen. Dies gibt dem Text ein kleines vertikales Auffüllen innerhalb der Zeilenbox.

Um das Problem zu beheben, fügen Sie line-height: 1 zu Ihrem Code hinzu.

Answer 2

Browser implementieren eine Standardzeilenhöhe für Text. In diesem Fall gibt es also 1 Pixel unterhalb und oberhalb des Textes. Sie können dies durch Einstellung line-height: 16px;