Abstände definieren
Mit den Befehlen margin
wird der Außenrand bzw. Außenabstnd und mit padding
der Innenrand bzw. Innenabstand zum Elternelement definiert.
HTML & CSS Stylesheets Referenz JavaScript PHP MySQL Sonstiges Gästebuch Inhalt Impressum
Mit den Befehlen margin
wird der Außenrand bzw. Außenabstnd und mit padding
der Innenrand bzw. Innenabstand zum Elternelement definiert.
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.
<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.
Mit padding
definieren Sie den Innenabstand innerhalb eines Elementes.
<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.
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 |