http://jendryschik.de / archiv / einfuehrung /

4. Styling von Webseiten

  Textformatierung

Abstandsangaben

Es gibt zwei Arten von Abstandsdefinitionen: Zum einen der Abstand eines Elementes zu anderen Elementen (margin) und zum anderen der Abstanden von Inhalten von Elementen zu deren Rand (padding).
Folgende Abstandsangaben sind möglich:

margin

margin

{ margin : 2px; } bedeutet, dass das Element zu allen Seiten 2 Pixel Abstand zu anderen Elementen einhält. Es sind hierbei sowohl Längen- als auch Prozentangaben möglich. Mit dem Wert auto wird der Abstand automatisch festgelegt.

margin-top, margin-bottom, margin-left, margin-right

Damit können Sie für alle vier Richtungen den Abstand einzeln angeben.

Browser reagieren unterschiedlich auf margin-Angaben. Man sollte daher immer in unterschiedlichen Browsern probieren, wie die Angaben umgesetzt werden.

Will man für alle vier Seiten Abstände definieren, sollte man nicht alle vier margin-Angaben auflisten, sondern folgende Lösung wählen:

{ margin: 1px 2px; } /* 1px oben und unten, 2px rechts und links */
{ margin: 1px 2px 3px; } /* 1px oben, 2px rechts und links und 3px unten */
{ margin: 1px 2px 3px 4px; } /* 1px oben, 2px rechts, 3px unten und 4px links */

padding

Mit padding verhält es sich im Wesentlichen so wie mit margin.

padding

{ padding : 3px; } bedeutet, dass innerhalb eines Elementes wie zum Beispiel <div> zu allen Seiten 3 Pixel Innenabstand eingehalten wird. Es sind hier ebenfalls sowohl Längen- als auch Prozentangaben möglich.

padding-top, padding-bottom, padding-left, padding-right

Damit können Sie für alle vier Richtungen den Abstand einzeln angeben.

Für Angaben zu mehreren Elementseiten funktioniert ebenfalls die für margin angegebene, kürzere Lösung.

  Positionierung von Elementen