CSS Box-Modell

CSS-Box-Modell

Alle HTML-Elemente können als Boxen betrachtet werden. In CSS wird der Begriff "Box-Modell" für Design und Layout verwendet.

Das CSS-Box-Modell ist im Wesentlichen eine Box, die HTML-Elemente umschließt. Es umfasst: Außenabstände, Rahmen, Innenabstände und den eigentlichen Inhalt.

Das Box-Modell ermöglicht es uns, Elemente im Raum zwischen anderen Elementen und den Rändern umgebender Elemente zu platzieren.

Das folgende Bild veranschaulicht das Box-Modell:

Erklärung der verschiedenen Teile:

• Außenabstand- Schafft Platz außerhalb des Rahmens; der Außenabstand ist transparent.
• Rahmen- Ein Rahmen, der um den Innenabstand und den Inhalt herum verläuft.
• Innenabstand- Schafft Platz um den Inhalt herum; der Innenabstand ist transparent.
• Inhalt- Der Inhalt der Box, in der Text und Bilder erscheinen.

Um die Breite und Höhe eines Elements in allen Browsern korrekt festzulegen, müssen Sie wissen, wie das Box-Modell funktioniert.

Breite und Höhe eines Elements

Wichtig:Wenn Sie die Eigenschaften width und height eines CSS-Elements angeben, legen Sie nur die Breite und Höhe des Inhaltsbereichs fest. Um die vollständige Größe des Elements zu kennen, müssen Sie auch Innenabstände, Rahmen und Außenabstände hinzufügen.

Die Gesamtbreite des Elements im folgenden Beispiel beträgt 450px:

Berechnen wir es selbst:
300px (Breite)
+ 50px (linker + rechter Innenabstand)
+ 50px (linker + rechter Rahmen)
+ 50px (linker + rechter Außenabstand)
= 450px

Stell dir vor, du hast nur 250 Pixel Platz. Legen wir ein Element mit einer Gesamtbreite von 250 Pixeln fest:

Die Formel zur Berechnung der Gesamtbreite des endgültigen Elements lautet wie folgt:

Gesamtbreite des Elements = Breite + linker Innenabstand + rechter Innenabstand + linker Rahmen + rechter Rahmen + linker Außenabstand + rechter Außenabstand

Die endgültige Formel zur Berechnung der Gesamthöhe des Elements lautet wie folgt:

Gesamthöhe des Elements = Höhe + oberer Innenabstand + unterer Innenabstand + oberer Rahmen + unterer Rahmen + oberer Außenabstand + unterer Außenabstand

Browser-Kompatibilitätsprobleme

Sobald eine geeignete DTD für die Seite festgelegt ist, rendern die meisten Browser den Inhalt gemäß der obigen Abbildung. IE 5 und 6 rendern ihn jedoch falsch. Gemäß der W3C-Spezifikation wird der vom Elementinhalt belegte Platz durch die width-Eigenschaft festgelegt, während die padding- und border-Werte um den Inhalt herum separat berechnet werden. Leider verwenden IE5.x und 6 im Quirks-Modus ihr eigenes, nicht standardkonformes Modell. Die width-Eigenschaft dieser Browser ist nicht die Breite des Inhalts, sondern die Summe der Breiten von Inhalt, padding und border.

Obwohl es Methoden gibt, um dieses Problem zu lösen, ist die derzeit beste Lösung, es zu vermeiden. Das heißt, fügen Sie einem Element kein padding mit angegebener width hinzu, sondern versuchen Sie, dem Elternelement und den Kindelementen des Elements padding oder margin hinzuzufügen.

IE8 und frühere Versionen von IE unterstützen das Festlegen der width-Eigenschaften von padding und border nicht.

Um das Inkompatibilitätsproblem mit IE8 und früheren Versionen zu lösen, deklarieren Sie einfach <!DOCTYPE html> in der HTML-Seite.