MNH Gedankensprudel

nicht nur ein stilles Wasser

Merksatz für CSS Deklarationen für mehrere Seiten

11.01.12 (Allgemein)

In CSS gibt es viele Deklarationen die mehrere Werte nutzen, die sich auf unterschiedlichen Seiten des Boxmodells beziehen z.B.:

•    margin
•    padding
•    border-width

Da ich nun auch gerne vergesse welcher Wert nun zu welcher Seite gehört, habe ich mal einen kleinen Merksatz mit Anschauungsmaterial erstellt.

Am Anfang das einfachste ein (1) Wert.

Da nur ein wert zu Verfügung steht ist dieser für alle Seiten gleich
Also ist:

p {
margin:10px;
}

eine vereinfachte Darstellung von:

p {
margin:10px 10px 10px 10px;
}

Nun kommen wir schon zu zwei (2) Werten.

p {
margin:10px 5px;
}

2 Werte in der CSS Deklaration
Der Trick funktioniert wen wir oben beginnen zu zählen und dann  im Uhrzeigersinn weiterzählen. Somit würde oben Wert Eins und Rechts Wert Zwei Stehen.
Doch wie belege ich nun die restlichen zwei Seiten?
Dieses ist ganz einfach ich nehme einfach immer die gegenüberliegende Seite, so ergibt sich ganz automatisch:

  1. Wert Eins für Oben und Unten
  2. Wert Zwei Rechts und Links

Der Trick funktioniert übrigens auch für drei Werte

p {
margin:10px 5px 15px;
}


Allerdings bleibt nach dem Weiterzählen nur die linke Seite ohne Wert also kann auch nur darauf gespiegelt werden:

  1. Wert Eins für Oben
  2. Wert Zwei Rechts und Links
  3. Wert Drei für Unten

Als letztes alle vier Werte. Hier muss nicht mehr gespiegelt werden sondern einfach nur gezählt

p {
margin:10px 5px 15px 20px;
}


Somit ergibt sich dann folgendes Bild:

  1. Wert Eins für Oben
  2. Wert Zwei Rechts
  3. Wert Drei für Unten
  4. Wert Vier für Links

Ich hoffe ich konnte euch mit meinen Tutorial ein wenig helfen.

Carschrotter
ist leidenschaftlicher Technik Fan beigester von allen was mit dem Web zu tuen hat und Vollblut Nerd. Deshalb war auch sein Ausbildung zum Fachinformatiker ein logischer schritt.

Kommentar schreiben

I accept that my given data and my IP address is sent to a server in the USA only for the purpose of spam prevention through the Akismet program.More information on Akismet and GDPR.

XHTML: Sie können diese Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre prompt="" escaped="">