margin: Außenabstand

0 | 8789 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "margin: Außenabstand" mit Ihrem Wissen!

Anzeige Hier werben

margin

Werte: Zahlen, Längen und Prozentangaben
Standardwert: 0
Vererbung: nein
Kurzschreibweise: keine
Anwendbar auf: Alle Elemente
CSS-Level: CSS1, CSS2, CSS3

Um beispielsweise einen Abstand zwischen Text und Seitenrand zu gewinnen, kommt der Außenabstand (margin) zum Einsatz.

Firefox3.6Unterstützt4+Unterstützt
IE7Unterstützt8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
margin

Hinweis

Durch die Definition margin: 0 auto; können Blockelemente vertikal zentriert werden. Dies sollte nicht mit der Eigenschaft text-align verwechselt werden, die nur zur Ausrichtung von Texten gedacht ist, auch wenn eine Ausrichtung von Elementen im Kompatibilitätsmodus vieler Browser früher möglich war.

Speziellere Eigenschaften

Neben der Eigenschaft margin existieren noch vier weitere Eigenschaften für sämtliche Seiten. Diese sind in der folgenden Tabelle aufgelistet:

Eigenschaft
Bedeutung
margin-left
Legt den Außenabstand zur linken Kante fest
margin-right
Legt den Außenabstand zur rechten Kante fest
margin-top
Legt den Außenabstand zur oberen Kante fest
margin-bottom
Legt den Außenabstand zur unteren Kante fest

Kurzschreibweise

Um CSS möglichst effizient zu gestalten, sollte beispielsweise anstelle von vier einzelnen Definitionen der einzelnen Seiten die Kurzschreibweise margin mit 4 Werten benutzt werden. Mehr dazu im Abschnitt Werte.

Werte

Die Werte können unterschiedlich angegeben werden. Entweder für alle Seiten gleich, für jede Seite einzeln, oben und unten gleich und rechts und links gleich oder für rechts und links gleich aber für oben und unten unterschiedlich

Typ
Schreibweise
Erklärung
alle Seiten gleich
margin: 10px;
jede Seite einzeln
margin: 10px 15px 20px 25px;
1. Wert oben
2. Wert rechts
3. Wert unten
4. Wert links
oben und unten gleich, rechts und links gleich
margin: 10px 20px;
1. Wert oben & unten
2. Wert rechts & links
rechts und links gleich, oben und unten unterschiedlich
margin: 10px 20px 30px;
1. Wert oben
2. Wert rechts & links
3. Wert unten

Beispiel

margin  
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<style type="text/css">
  p {
    margin: 100px;
    border: 1px solid #000;
  }
</style>

<p>
  An diesem Beispiel sieht man, wie margin funktioniert.
</p>

Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 3 Personen an der Seite "margin: Außenabstand" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "margin: Außenabstand" hier bearbeiten.

Mitarbeiter
  • Ich bin Schüler eines Gymnasiums und beschäftige mich in meiner Freizeit seit vielen Jahren mit HTML- und CSS-Programmierung. Außerdem interessiere ich mich für PHP (WordPress, Drupal, ...), Ruby und Ruby on Rails.
  • hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
  • Kinderturnen - Sport Spiele für Kinder