Alles klar soweit !?

Sie befinden sich hier:

In diesem Teil befassen wir uns mit dem Thema Box-Modell. Wir werden es so kurz wie möglich halten, damit ihr keine Probleme habt dieses zu verstehen.

Das Box-Modell beschreibt die Beziehung zwischen den Abst√§nden f√ľr ein bestimmtes Element. Wie unten im Bild zu erkennen gibt es den Au√üenabstand (margin), den Rahmen (border), den Innenabstand (padding) und die Gr√∂√üe des Elementes selbst (width, height).

Dieses Beispiel werden wir jetzt selbst erstellen:

Zunächst benötigen wir zwei  Container. Den einen setzen wir in den anderen hinein. Ausserdem weisen wir jeweils eine ID den Elementen zu und geben dann im Kopfbereich die nötigen Abstände an:

<html>
<head>

<style type="text/css">
#aussen {width:500px;height:500px;border:1px solid #000;}

#inhalt {
width:150px;
height:150px;
margin-top:200px;
margin-left:40px;
padding:50px;
border-top:5px solid #ff0000;
border-bottom:2px solid #0000ff;
border-left:7px solid #00ff00;
border-right:3px solid #ffff00;
}

</style>

</head>
<body>

<div id="aussen">
<div id="inhalt">Inhalt</div>
</div>

</body>
</html>

Beispiel Box-Modell

In unserem Kopfbereich haben wir den Container mit der IDaussen” auf eine gr√∂√üe von 500 mal 500 Pixeln begrenzt und anschlie√üend einen Rahmen mit einer Liniengr√∂√üe von 1px, durchgezogen (solid) und schwarz hinzugef√ľgt.

Der Containerinhalt” befindet sich innerhalb des anderen Elements. Wenn wir nun keine Angaben machen w√ľrden, w√ľrde der Container b√ľndig links oben in der Ecke des “aussen”-Containers erscheinen.

Das zweite Element haben wir auf eine Größe von 150 mal 150 Pixeln eingestellt. Nun zu den einzelnen Abständen:

  • Au√üenabstand: In diesem Fall ist der Au√üenabstand der Abstand zwischen dem Rahmen des “inhalt”-Containers und des “aussen”-Containers. Wir haben den oberen (margin-top) und den linken (mragin-left) Abstand definiert. Wenn f√ľr den “aussen”-Container ein Innenabstand (padding) gew√§hlt w√ľrde, dann w√ľrde sich auch der Au√üenabstand ver√§ndern.
  • Rahmen: Die gew√§hlte Rahmen gr√∂√üe macht sich auch auf die Abst√§nde der einzelnen Elemente bemerkbar. Je gr√∂√üer der Rahmen ist, desto gr√∂√üer wird auch der Abstand zum n√§chsten Element. In unserem Beispiel haben wir vier verschiedene Rahmengr√∂√üen gew√§hlt.
  • Innenabstand: Der Innenabstand definiert den Abstand zwischen dem Inhalt und dem Rahmen eines Elementes. Wir haben dem Element einen Innenabstand von 50 Pixel auf jeder Seite gegeben.

Hinweis: Wenn wir keine genau Abstandsangabe wie “top, left, right, bottom” machen, dann wird der Abstand auf jeder Seite definiert.

 

Ihr habt noch¬†Fragen¬†oder¬†Anregungen, dann schreibt uns einfach eine E-Mail √ľber unser¬†Kontaktformular¬†oder kommentiert diesen Beitrag!

Alles klar soweit !?

 

vorheriger Artikel: nächster Artikel:
» «

Geschrieben am: 31. M√§rz 2015 um 08:33 // Thema: CSS //  Kommentar verfassen

Auf dieses Thema gibt es noch keine Reaktion

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *




Impressum // KlaroBox // die kostenlose Lernkiste