Webdesign, Tutorials und mehr - Webmasterpro.de

margin: Außenabstand

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

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:

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

Beispiel

 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>

Weiterführende Links

• Darstellung und Abstände
• Das CSS Boxmodel

Kommentare: margin: Außenabstand