HTML, CSS, PHP, MySQL

html-php.de

HTML & CSS Stylesheets Referenz JavaScript PHP MySQL Sonstiges Gästebuch Inhalt Impressum

[ Abstand definieren ] [ Außenrand ] [ Innenrand ] [ Mehrere Angaben im Attribut ]

Abstände definieren

Mit den Befehlen margin wird der Außenrand bzw. Außenabstnd und mit padding der Innenrand bzw. Innenabstand zum Elternelement definiert.

Außenrand definieren

Um den Abstand zwischen einen Element zum Elternelement zu denfinieren, benutzen Sie den Befehl margin Im folgenden Beispiel definieren wir eine Box mit einen Abstand von 50 Punkten von oben und von links. Der Abschnitt innerhalb der box hat einen Abstand von 10 Punkten von oben und 10 Punkten von links.

Code:
  <html>
  <head>
   <title>Abstand</title>
   <style type="text/css">
    #box {
      border:1px solid red;
      background-color:#FFFF00; color:black;
      margin-left:50px; margin-top:50px;
      width:50%; height:100px;
    }
    p {
      margin-left:10px; margin-top:10px;
    }
   </style>
  </head>
  <body>
   <div class="box"
    <p>Diese Box hat einen Abstand von 50 Punkten 
    von oben und von links<br>
    und der Abstand des Abschnittes hat einen Abstand von 
    10 Punkten von Links und von oben zum Boxrand</p>
   </div>
  </body>
  </html>
Das ganze sieht so aus

Dabei bedeutet:
margin-top = Abstand von oben
margin-left = Abstand von links
margin-right = Abstand von rechts
margin-bottom = Abstand von unten
Sie können aber auch alle vier Angaben zusammenfassen. Wenn der Abstand auf allen vier Rändern z.B. 10 Pixel sein soll, genügt die Angabe margin: 10px;. Wenn Sie zwei Angaben geben, definieren Sie mit der ersten Angabe den Abstand von oben und unten, und mit der zweiten Angabe den Abstand von links und rechts z.B. margin: 10px 20px;, oder Sie geben sogar 4 Angaben an, z.B. margin: 10px 20px 20px 10px;.
Siehe dazu auch unter  - Mehrere Angaben im Attribut. Statt einer Wertangabe kann auch margin-left: auto; margin-right: auto; angegeben werden. Damit werden Elemente zentriert ausgegeben.

Innenrand definieren

Mit padding definieren Sie den Innenabstand innerhalb eines Elementes.

Code:
  <html>
  <head>
   <title>Abstand</title>
   <style type="text/css">
    #box {
      border:1px solid red;
      background-color:#FFFF00; color:black;
      margin-left:50px; margin-top:50px;
      padding: 10px 20px 30px 10px;
      width:50%; height:100px;
    }
   </style>
  </head>
  <body>
   <div class="box"
    <p>Diese Box hat einen Abstand von 50 Pixel 
    von oben und von links<br>
    und der Abstand des Abschnittes hat einen Abstand von 
    20 Pixel von links, 10 Pixel von oben, 30 Pixel von 
    unten sowie 10 Pixel von rechts zum Boxrand</p>
   </div>
  </body>
  </html>
Das ganze sieht so aus

Genauso wie beim margin-Befehl können Sie die Angaben auch einzeln definieren mit:
padding-top = Abstand von oben
padding-left = Abstand von links
padding-right = Abstand von rechts
padding-bottom = Abstand von unten
oder zusammenfassen, wie im oben genannten Beispiel. Auch hier kann nur eine, zwei oder drei Angaben gemacht werden. Lesen Sie dazu den nächsten Abschnitt.

Mehrere Angaben im Attribut

Man kann mehrere Attribute angeben, z.B. margin: 10px 20px 30px; oder padding: 10px 20px; Dabei bedeutet:

1 Angabe- Abstand rundherum
2 Angaben- die erste Angabe für oben und unten, die zweite Angabe für rechts und links
3 Angaben- die erste Angabe für oben, die zweite Angabe für rechts und links, die dritte für unten
4 Angaben- die erste Angabe für oben, die zweite Angabe für rechts, die dritte für unten und die vierte für links

back top next