CSS. Benutzung von Rahmen (Border), Außenabstand (Margin), Innenabstand (Padding)

Dieses Tutorial hilft Ihnen die Benutzung von Rahmen (Border), Außenabstand (Margin), Innenabstand (Padding) besser zu verstehen. Diese Eigenschaften spielen ne große Rolle um die Elementen nach einem Wunsch auf der Webseite zu ordnen.

Erstellen wir div und weisen die Eigenschaften Rahmen (Border), Außenabstand (Margin) und Innenabstand (Padding) zu.

Innenabstand Eigenschaft

CSS padding – Innenabstand; schafft Platz um den Inhalt herum. So definieren Sie den Wert Padding:

• padding-top: 10px;
• padding-right: 10px;
• padding-bottom: 10px;
• padding-left: 10px;

Sie können das auch kurzer machen:

• padding:25px 50px 75px 100px;
  • oben – 25px
  • rechts- 50px
  • unten – 75px
  • links – 100px
  
  
• padding:25px 50px 75px;
  • oben – 25px
  • rechts und links- 50px
  • unten – 75px
  
  
• padding:25px 50px;
  • oben und unten – 25px
  • rechts und links – 50px
  
  
• padding:25px;
  • überall – 25px

HINWEIS: der Wert Padding wird zum Breite des Elements hinzugefügt und von der Hintergrundfarbe des Elements beeinflusst.

D.h. wir haben den Element div mit den Klasse div-1:

div.div-1{
width:150px;
padding: 25px;}

Der Browser fügt links und rechts die Padding-Werte zu Box-Breite hinzu. Als Ergebnis bekommen Sie die Box mit 200px Breite.

Rahmen Eigenschaft

CSS Rahmen Eigenschaft gibt Ihnen ne Möglichkein um Stil und Farben der Elementrahmen zu erzeugen.

border-width

Die border-width (Rahmen-Breite) Eigenschaft braucht man um die Breite den Rahmen festzulegen. Die Breite gibt man in Pixels oder mit Hilfe von drei vordefinierten Werten: thin (dünn), medium (mittel), oder thick (dick).

border-color

Die border-color (Rahmen-Farbe) Eigenschaft braucht man um die Farbe den Rahmen festzulegen. Man tun das mit:

• name – gibt einnen Farbe-Name, wie “red”, an
• RGB – gibt nen RGB Wert, wie “rgb(255,0,0)”, an
• Hex – gibt nen hex-Wert, wie “#ff0000”

border-style

Bestimmt die Linienart des Rahmens.

• dotted: Gepunktete Linie
• dashed: Gestrichelte Linie
• solid: Durchgezogene Linie
• double: Doppelte Linie. Die Breite der doppelte Linie ist gleich wie der border-width Wert
• groove: gerillten Rahmen mit 3D-Effekt. Je nach den border-color Wert variiert sich
• ridge: erhöhten Rahmen mit 3D-Effekt. Je nach den border-color Wert variiert sich
• inset: eingelassen Rahmen mit 3D-Effekt. Je nach den border-color Wert variiert sich
• outset: hervortretende Rahmen mit 3D-Effekt. Je nach den border-color Wert variiert sich

Ein kurzer Weg für Rahmen-Definierung sieht so aus:

div.div-2{
	border:1px solid #ccc;
    }

Außenabstand (Margin) Eigenschaft

CSS Margin – Außenabstand; schafft Platz nach außen vom Rahmen ausgehend und ist unsichtbar. Margin hat keine Hintergrundfarbe und ist absolut transparent. .

So legen Sie die Margin Werten fest:

• margin-top:100px;
• margin-bottom:100px;
• margin-right:50px;
• margin-left:50px;

oder noch kurzer:

• margin:25px 50px 75px 100px;
  • oben 25px
  • rechts 50px
  • unten 75px
  • links 100px
  
  
• margin:25px 50px 75px;
  • oben 25px
  • rechts und links 50px
  • unten 75px
  
  
• margin:25px 50px;
  • oben und unten 25px
  • rechts und links 50px
  
  
• margin:25px;
  • überall 25px

Mit auto-Werte für margin ist es möglich den Block horizontal auszurichten.

div.div-3{
	margin: 0 auto;
    }