Margin shorthand
 

Hey Leute,

wollte mal mein CSS etwas zusammenfassen und kürzen, da es langsam aber sicher ganz schön viel wird. Nun wollte ich die Kurzform für Margin anwenden. Wenn ich nicht irre könnte man also:

margin-top: 40px;
margin-right: 0px;

zu

margin: 40px, 0px, 0px, 0px; bzw. 40px 0px 0 0 zusammenfassen?

Jedoch ergibt das eine völlig andere Ausgabe wenn ich die Kurzform ausführe, dann rückt meine Nav Leiste nämlich nach oben, anstatt schön mittig platziert zu bleiben. Woran liegt das?

Vielen Dank schonmal für jede Hilfe.:oops:

Fast alle HTML Elemente haben vordefinierte Formatierungen, die der Browser standardmäßig mitbringt (user agent styles).
Wenn du diese user agent syles im CSS überschreibst, kann es schon sein, dass das fragliche Element von sich aus ein Margin hat, dass du dann überschreibst - und dann kann der Effekt das sein, was du bei dir feststellst.

Hmm okay das würde dieses Verhalten natürlich erklären. Gibt es denn eine andere Möglichkeit das ganze zu shorten? So dass ich trotzdem oben und rechts anspreche, und statt und und links auf null zu setzen einfach zu ignorieren?

Indem du eine eventuell vorhandene Formatierung aus dem user agent style nicht mit einem anderen Wert überschreibst.
Wenn du den Browser Chrome benutzt, der zeigt dir die Formate des user agents an, wenn du auf 'Untersuchen' gehst. Und zwar rechts in dem Feld 'Styles' wird dir ja angezeigt was du an Formatierungen im Stylesheet hat und dann auch mit der 'Quellenangabe' user agent stylesheet eben das, was der Browser an an Vorgaben hat. Ob die Vorgaben von Chrome dann allerdings auch für alle anderen Browser gelten, kann ich nicht sagen - das müsstest du dann ausprobieren.

Nein, die gibt es nicht. Bei margin werden in der Kurzschreibweise immer alle Werte überschrieben.

Bei einer Angabe: Der Wert wird für alle Seiten übernommen

Bei zwei Angaben: Der erste Wert gilt für oben/unten, der zweite links/rechts

Bei drei Angaben: Der erste Wert gilt für oben, der zweite für links/rechts und der dritte für unten

Bei vier Angaben: Der erste Wert gilt oben, der zweite für rechts, der dritte für unten, der vierte für links.

Bei anderen CSS-Anweisungen haben die Kurzschreibweisen wiederum ganz andere Auswirkungen, speziell nicht angegebene Werte. Ein einheitliches Verhalten gibt es dabei nicht.

So kann es passieren, dass fehlende Angaben bereits vorhandene Änderungen

a) belassen
b) mit dem Vorgabewert des Browsers überschreiben
c) in der Angabe selbst hinterlegte Werte einsetzen, also die Browservorgaben mit anderen Werten überschreiben

Ein System ist dahinter nicht zu entdecken, vieles hat sich aus der jahrzehntelangen Entwicklung ergeben. Aus Gründen der bis heute vorhandenen Abwärtskompatibilität werden ältere Auswirkungen nicht angepasst.

Die Kurzschreibweisen und vor allen deren Auswirkungen muss man also lernen.

Große Unterschiede zwischen den Browsern gibt es dabei heutzutage glücklicherweise nur noch in Ausnahmefällen.