CSS-Box-Modell

Das sogenannte Box-Modell behandelt das HTML-Element als Box. Im täglichen Leben sind Kisten die häufigsten Gegenstände. Beispielsweise besteht eine Schachtel mit Mondkuchen aus einer Außenverpackung, einer gewöhnlichen Eisenschachtel im Inneren und einer Plastik- oder Papierverpackung. In einer großen Schachtel befinden sich mehrere kleine Verpackungen. Auf die gleiche Weise wird jedes Tag in HTML als geformtes Feld betrachtet, und die Beziehung zwischen den Tags kann als Box-zu-Box-Beziehung betrachtet werden.

Das Boxmodell besteht aus: Inhalt: was das Element präsentieren möchte

Innenabstand: der Abstand zwischen Inhalt und Rand

Grenze (Grenze)

　　　　　Marge: der Abstand zwischen den Feldern

Die Breiten- und Höhenattribute sind die Breiten- und Höhenattribute des Inhalts (Inhalt), nicht die Breite und Höhe des Elements.

Die Breite des Elements = linker Rand, linker Rand, linke Polsterbreite, rechte Polsterung, rechter Rand, rechter Rand

Höhe des Elements = oberer Rand, oberer Rand, obere Polsterhöhe, untere Polsterung, unterer Rand, unterer Rand

Aus der obigen Formel lässt sich ableiten, dass die Eigenschaften jeder Kante separat (im Uhrzeigersinn) eingestellt werden können.

Zum Beispiel: padding:10px; (entspricht der Einstellung padding:10px 10px 10px 10px;)

　padding:10px 20px; (entspricht: padding:10px 20px 10px 20px;)

　padding:10px 15px 20px; (entspricht: padding:10px 15px 20px 15px;)

Das Gleiche gilt auch für andere Ränder und Umrandungen.