Warum hebt ein 1px-Rand eine 100px-Randoberkante auf und löscht eine Bildlaufleiste?
Das ergibt für mich noch keinen Sinn. Was vermisse ich?
Der Code ist unten und auf Codepen .
box-sizing: border-box; macht keinen Unterschied. Wenn Sie einen Rahmen hinzufügen, wird vertikale Ränder nicht zusammenzufallen , aber was genau ist los?
- mit border: keine Bildlaufleiste
-
ohne Rahmen , die beiden oberen Ränder werden minimiert, daher sollte weniger vertikaler Platz erforderlich sein, aber wir erhalten eine vertikale Bildlaufleiste auf der gesamten Höhe
body.
1 Antwort
Dies ist auf das Zusammenfallen der Ränder zurückzuführen:
Wenn kein Rahmen, Padding, Inline-Inhalt oder Abstand vorhanden ist, um den oberen Rand eines Blocks mit dem oberen Rand des ersten untergeordneten Blocks zu trennen, oder ohne Rahmen, Füllung, Inline-Inhalt, Höhe, Mindesthöhe oder max-height, um den unteren Rand eines Blocks mit dem unteren Rand seines letzten untergeordneten Elements zu trennen, dann werden diese Ränder reduziert. Der reduzierte Rand endet außerhalb des übergeordneten Elements.
( Ссылка )
Wenn .middle keine border hat, wird die margin , die auf .middle div angewendet wurde, außerhalb davon angezeigt, was effektiv body hat height: 100vh; und margin-top: 100px; . Dies verursacht die Bildlaufleiste.
Mit dem border auf .middle ist margin in .middle enthalten, so dass body nur height: 100vh; und keine Bildlaufleiste hat.
Als Bestätigung werden Sie feststellen, dass Sie dasselbe Ergebnis erhalten, wenn Sie stattdessen border zu body hinzufügen.