CSS-Box-Modell


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


Alle HTML-Elemente können als Boxen betrachtet werden.


Das CSS-Box-Modell

In CSS wird der Begriff „Box-Modell“ verwendet, wenn es um Design und Layout geht.

Das CSS-Box-Modell ist im Wesentlichen eine Box, die jedes HTML-Element umschließt. Es besteht aus: Rändern, Rahmen, Polsterung und dem eigentlichen Inhalt. Das Bild unten zeigt das Box-Modell:

Erklärung der einzelnen Teile:

  • Inhalt - Der Inhalt des Felds, in dem Text und Bilder angezeigt werden

  • Padding - Löscht einen Bereich um den Inhalt herum. Die Polsterung ist transparent

  • Rand - Ein Rand, der die Polsterung und den Inhalt umgibt

  • Margin - Löscht einen Bereich außerhalb des Randes. Die Marge beträgt transparent

Das Box-Modell ermöglicht es uns, einen Rahmen um Elemente hinzuzufügen und den Raum zu definieren zwischen Elementen.

Beispiel

Demonstration des Boxmodells:

div {
  width: 300px;
  border: 15px solid 
green;
  
padding: 50px;
  
margin: 20px;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: lightgrey;
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}
</style>
</head>
<body>

<h2>Demonstrating the Box Model</h2>

<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders, padding, margins, and the actual content.</p>

<div>This text is the content of the box. We have added a 50px padding, 20px margin and a 15px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

</body>
</html>




Breite und Höhe eines Elements

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

Wichtig: Wenn Sie die Breiten- und Höheneigenschaften eines festlegen Element mit CSS erstellen, legen Sie einfach die Breite und Höhe des Inhaltsbereichs fest. Zu Um die volle Größe eines Elements zu berechnen, müssen Sie auch Polsterung, Ränder und Ränder hinzufügen.

Beispiel

Dieses <div>-Element hat eine Gesamtbreite von 350 Pixel:

div {	width: 320px;
   
padding: 10px;
   
border: 5px solid gray;
   
margin: 0;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 320px;
  height: 50px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
}
</style>
</head>
<body>

<h2>Calculate the total width:</h2>

<img src="klematis4_big.jpg" width="350" height="263" alt="Klematis">
<div>The picture above is 350px wide. The total width of this element is also 350px. The total height of this element is 80px.</div>

</body>
</html>


Hier ist die Berechnung:

320 Pixel (Breite)
+ 20px (linker + rechter Abstand)
+ 10px (linker + rechter Rand)
+ 0px (linker + rechter Rand)
= 350px

Die Gesamtbreite eines Elements sollte wie folgt berechnet werden:

Gesamtelementbreite=Breite + linke Polsterung + rechte Polsterung + links Rand + rechter Rand + linker Rand + rechter Rand

Die Gesamthöhe eines Elements sollte wie folgt berechnet werden:

Gesamthöhe des Elements=Höhe + obere Polsterung + untere Polsterung + Oberseite Rand + unterer Rand + oberer Rand + unterer Rand

Hinweis: Die Randeigenschaft wirkt sich auch auf den Gesamtraum des Felds aus wird die Seite einnehmen, der Rand ist jedoch nicht in der tatsächlichen Größe enthalten die Kiste. Die Gesamtbreite und -höhe der Box endet am Rand.