zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Margin shorthand

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 02.04.2020, 17:05
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.04.2020
Beiträge: 2
Adlermania befindet sich auf einem aufstrebenden Ast
Standard 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.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 02.04.2020, 17:34
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.07.2018
Beiträge: 140
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 02.04.2020, 18:33
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.04.2020
Beiträge: 2
Adlermania befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
  #4 (permalink)  
Alt 02.04.2020, 18:45
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.07.2018
Beiträge: 140
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #5 (permalink)  
Alt 03.04.2020, 06:26
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.071
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Zitat:
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?
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.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Verschiebungen bei größerem Bildschirm seelefant CSS 4 28.07.2014 15:43
Navigation positionieren maybebabe CSS 4 08.04.2013 22:17
rahmen um bilder- was mache ich falsch? R0sa CSS 3 19.11.2012 16:35
Responsive webdesign: horizontales Menü mit angepasster Schriftgröße Spencer Javascript & Ajax 3 18.09.2012 23:16
joomla template wrock CSS 2 06.04.2012 19:24


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:53 Uhr.