Summary  
This chapter explains the CSS box model, detailing how content, padding, border, and margin form an element’s rectangular area and how width and height properties control its dimensions. It covers how these layers interact to determine spacing and size.

General domain of usage  
Web page layout

HTML-Elemente werden als rechteckige Boxen auf einer Webseite dargestellt. Jedes Element besitzt einen Inhaltsbereich, Innenabstand (Padding), Rahmen (Border) und Außenabstand (Margin).

- Der **Innenabstand (Padding)** ist der Bereich zwischen dem Inhalt und dem Rahmen und kann verwendet werden, um Abstand zwischen Inhalt und Rahmen hinzuzufügen;
- Der **Rahmen (Border)** umgibt das Element. Standardmäßig beträgt die Rahmenbreite `0`. Wenn keine Rahmenfarbe angegeben wird, übernimmt der Rahmen die Farbe des Inhalts;
- Der **Außenabstand (Margin)** ist der Abstand zwischen dem Rahmen und anderen Elementen auf der Seite.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0ic3R5bGVzLmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8ZGl2IGNsYXNzPSJwYWdlIj4KICAgICAgPGRpdiBjbGFzcz0iYm94Ij4KICAgICAgICA8cCBjbGFzcz0icXVvdGUiPgogICAgICAgICAgIktub3dpbmcgeW91cnNlbGYgaXMgdGhlIGJlZ2lubmluZyBvZiBhbGwgd2lzZG9tLiIgLSBBcmlzdG90bGUKICAgICAgICA8L3A+CiAgICAgIDwvZGl2PgogICAgPC9kaXY+CiAgPC9ib2R5Pgo8L2h0bWw+

LyogQ3VycmVudCBmb2N1cyAqLwouYm94IHsKICBtYXJnaW46IDQwcHg7IC8qIFNwYWNlIG91dHNpZGUgdGhlIGVsZW1lbnQgKi8KICBib3JkZXI6IDRweCBzb2xpZCBkYXJrYmx1ZTsgLyogVmlzaWJsZSBlZGdlICovCiAgcGFkZGluZzogMjBweDsgLyogU3BhY2UgaW5zaWRlIHRoZSBlbGVtZW50ICovCiAgYmFja2dyb3VuZC1jb2xvcjogbGF2ZW5kZXI7IC8qIFNob3dzIHRoZSBwYWRkZWQgYXJlYSAqLwp9CgovKiBBZGRpdGlvbmFsIHN0eWxlcyBmb3IgYmV0dGVyIGFwcGVhcmFuY2UgKG5vdCB0aGUgY3VycmVudCBmb2N1cykgKi8KYm9keSB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2YwZjBmMDsKICBtYXJnaW46IDA7Cn0KCi5wYWdlIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiBsaWdodGJsdWU7IC8qIEp1c3QgZm9yIGNvbnRyYXN0ICovCiAgcGFkZGluZzogMTBweDsgLyogTm90IHRoZSBmb2N1cywganVzdCBzcGFjaW5nICovCn0KCi5xdW90ZSB7CiAgZm9udC1zaXplOiAxOHB4OwogIGZvbnQtd2VpZ2h0OiA2MDA7CiAgY29sb3I6ICMzMzM7CiAgbWFyZ2luOiAwOwogIHRleHQtYWxpZ246IGNlbnRlcjsKfQ==

> Hinweis
> 
> Standardmäßig besitzen einige Elemente vordefinierte `padding`- und `margin`-Eigenschaften. Dies wurde eingeführt, um sicherzustellen, dass eine Webseite auch ohne zusätzliche Styles lesbar bleibt.

## Eigenschaften width und height
Die Eigenschaften `width` und `height` werden verwendet, um die Größe eines Elements festzulegen. Die Breite und Höhe eines Elements können je nach verwendetem Box-Modell variieren.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0ic3R5bGVzLmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8ZGl2IGNsYXNzPSJ3cmFwcGVyIj4KICAgICAgPGRpdiBjbGFzcz0iYm94IGZpeGVkIj4KICAgICAgICA8aDM+Rml4ZWQgU2l6ZTwvaDM+CiAgICAgICAgPHA+VGhpcyBib3ggaGFzIGEgZml4ZWQgd2lkdGggYW5kIGhlaWdodC48L3A+CiAgICAgIDwvZGl2PgoKICAgICAgPGRpdiBjbGFzcz0iYm94IHBlcmNlbnRhZ2UiPgogICAgICAgIDxoMz5QZXJjZW50YWdlPC9oMz4KICAgICAgICA8cD4KICAgICAgICAgIFRoaXMgYm94IHRha2VzIHVwIDUwJSBvZiB0aGUgd3JhcHBlcidzIHdpZHRoIGFuZCA2MCUgb2YgaXRzIGhlaWdodC4KICAgICAgICA8L3A+CiAgICAgIDwvZGl2PgoKICAgICAgPGRpdiBjbGFzcz0iYm94IGF1dG8taGVpZ2h0Ij4KICAgICAgICA8aDM+QXV0byBIZWlnaHQ8L2gzPgogICAgICAgIDxwPgogICAgICAgICAgVGhpcyBib3ggaGFzIGEgZml4ZWQgd2lkdGggYnV0IGl0cyBoZWlnaHQgYWRhcHRzIHRvIHRoZSBjb250ZW50LiBBZGQKICAgICAgICAgIG1vcmUgbGluZXMgYW5kIGl0IGdyb3dzIQogICAgICAgIDwvcD4KICAgICAgPC9kaXY+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LyogQ3VycmVudCBmb2N1cyAqLwoKLyogRml4ZWQgd2lkdGggYW5kIGhlaWdodCAqLwouZml4ZWQgewogIHdpZHRoOiAyMDBweDsKICBoZWlnaHQ6IDE0MHB4OwogIGJhY2tncm91bmQtY29sb3I6ICNlMGY3ZmE7Cn0KCi8qIFBlcmNlbnRhZ2UtYmFzZWQgc2l6aW5nICovCi5wZXJjZW50YWdlIHsKICB3aWR0aDogNTAlOwogIGhlaWdodDogNjAlOwogIGJhY2tncm91bmQtY29sb3I6ICNmZmUwYjI7Cn0KCi8qIEF1dG8gaGVpZ2h0LCBmaXhlZCB3aWR0aCAqLwouYXV0by1oZWlnaHQgewogIHdpZHRoOiAyMDBweDsKICBoZWlnaHQ6IGF1dG87CiAgYmFja2dyb3VuZC1jb2xvcjogI2QxYzRlOTsKfQoKLyogQWRkaXRpb25hbCBzdHlsZXMgZm9yIGJldHRlciBhcHBlYXJhbmNlIChub3QgdGhlIGN1cnJlbnQgZm9jdXMpICovCmJvZHkgewogIGZvbnQtZmFtaWx5OiAnUXVpY2tzYW5kJywgc2Fucy1zZXJpZjsKICBtYXJnaW46IDA7CiAgcGFkZGluZzogMDsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmZmZmOwp9Cgoud3JhcHBlciB7CiAgd2lkdGg6IDkwJTsKICBoZWlnaHQ6IDQwMHB4OwogIG1hcmdpbjogYXV0bzsKICBkaXNwbGF5OiBmbGV4OwogIGp1c3RpZnktY29udGVudDogc3BhY2UtYXJvdW5kOwogIGFsaWduLWl0ZW1zOiBmbGV4LXN0YXJ0OwogIGJhY2tncm91bmQtY29sb3I6ICNmMGYwZjA7CiAgcGFkZGluZzogMjBweDsKICBnYXA6IDIwcHg7Cn0KCi5ib3ggewogIGJvcmRlcjogMnB4IGRhc2hlZCAjYWFhOwogIGJvcmRlci1yYWRpdXM6IDhweDsKICBwYWRkaW5nOiAxNXB4OwogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7Cn0KCmgzIHsKICBtYXJnaW4tdG9wOiAwOwogIGZvbnQtc2l6ZTogMTZweDsKICB0ZXh0LWFsaWduOiBjZW50ZXI7Cn0=

Es ist ebenfalls wichtig zu erwähnen, dass für die meisten Elemente häufig die Angabe der Eigenschaft `width` ausreichend ist, da die `height` automatisch bestimmt wird. Dies hilft, Überlaufprobleme zu vermeiden, wenn die `width` oder `height` des Inhalts kleiner als der darin enthaltene Inhalt ist.

Beherrschen Sie die Grundlagen von CSS (Cascading Style Sheets), der Gestaltungssprache, die das Erscheinungsbild von Webseiten verändert. Erforschen Sie zentrale Konzepte wie Textstile, Farben, Abstände, das Box-Modell, Flexbox und dekorative Effekte. Entwickeln Sie Fähigkeiten zur Erstellung ansprechender und gut strukturierter Webseiten. Ideal für Einsteiger, die eine solide Grundlage in CSS aufbauen möchten.

Erfahren Sie, was CSS ist, wie es mit HTML verbunden wird und wie HTML-Elemente mithilfe von Selektoren gestaltet werden. Entdecken Sie grundlegende Konzepte wie Textfarben, Pseudoklassen für Benutzeraktionen und Variablen in CSS.

Erfahren Sie, wie Sie Text auf Ihren Webseiten gestalten und formatieren. Lernen Sie, benutzerdefinierte Schriftarten anzuwenden und verschiedene Schriftarteigenschaften zu erkunden, um das Erscheinungsbild von Text zu verbessern.

Erlernen der Grundlagen des Box-Modells, das das Layout und die Abstände von Elementen auf einer Webseite definiert. Untersuchung von Konzepten wie Box-Sizing, Hinzufügen von Abstand zu Elementen, Arbeiten mit Block- und Inline-Elementen sowie Nutzung struktureller und funktionaler Pseudoklassen für fortgeschrittenes Styling.

Entdecken Sie Flexbox, eine leistungsstarke CSS-Layoutmethode zur Anordnung von Elementen in Zeilen und Spalten. Erfahren Sie, wie Sie Richtung, Ausrichtung und Abstand von Elementen horizontal und vertikal steuern sowie einzelne Flex-Elemente für präzise Layouts anpassen können.

Erfahren Sie, wie Sie mit CSS die visuelle Attraktivität Ihrer Webseiten steigern. Entdecken Sie Techniken zur Anwendung von Hintergrundfarben und -bildern, zum Stylen von Bildern, zur Nutzung dekorativer Pseudoelemente und zum Hinzufügen von Schatten für beeindruckende Designs.

Was ist das CSS-Box-Modell?

Eigenschaften width und height

Awesome!

Was ist das CSS-Box-Modell?

Eigenschaften width und height