Negative Margins bei gefloatete Elementen?

2 Antworten

Vom Fragesteller als hilfreich ausgezeichnet
Wie sieht es aber bei gefloateten Elementen aus? Wie wirkt sich da, der negative Margin aus?

Das verhält sich etwas anders. Es gibt zwei verschiedene Fälle.

Negativer Margin in Floatrichtung

Floatest du nach links und wendest einen negativen margin-left an, so verhält sich das genauso wie bei statisch positionierten Elementen. Dasselbe gilt für float: right und margin-right. Beispiel: https://jsfiddle.net/xu7Lmuok/

Negativer Margin entgegen der Floatrichtung

Wendest du nun einen negativen Margin entgegen der Floatrichtung an, so merkst du auf den ersten Blick keinen Unterschied, egal wie stark du den Margin erhöhst. Es scheint, als hätte der negative Margin gar keine Auswirkung. Beispiel: https://jsfiddle.net/eaL223sd/

Nehmen wir an, du hast folgendes Layout: https://jsfiddle.net/2gvsrLoy/

Nun wenden wir einen negativen Margin entgegen der Floatrichtung an: https://jsfiddle.net/7t2zy4Lh/

Wie du siehst, verändert sich das Element selbst nicht, aber für andere gefloatete Elemente verhält es sich nun so, als wäre die Breite um den Betrag des negativen Margins geringer. Der von dir verlinkte Artikel versucht nun zu erklären, dass dies praktisch ist, wenn man ein Spaltenlayout hat, in dem eine Spalte eine feste Breite (hier: 200px) hat und die andere Spalte dynamisch den restlichen Platz füllen soll.

Außer einem Spaltenlayout ist z. B. auch Folgendes möglich: https://jsfiddle.net/y3dhw22d/

Dies klappt nur dank des negativen Margins und hat gegenüber dem Verringern der Breite den Vorteil, dass der Text an anderen Stellen weiterhin die volle Breite einnimmt, siehe das Gegenbeispiel ohne negativen Margins, sondern mit geringerer Breite: https://jsfiddle.net/vm6d3k0n/

Wie du siehst, ist hier die Variante mit negativen Margins viel besser, weil das Element weiterhin die volle Breite einnimmt, wenn dies möglich ist. Der negative Margin verändert also nicht zwangsläufig die Breite des Elements, schafft aber Platz für andere Elemente, der bei Bedarf auch genutzt wird.

Eine weitere gute Referenz

Hier findest du einen weiteren guten Artikel über das Thema: https://www.smashingmagazine.com/2009/07/the-definitive-guide-to-using-negative-margins/

Ich denke, der Rest deines Artikels sollte nun klar sein. Ansonsten kannst du gerne noch spezifisch nachfragen ;-)

Kann eine Kraft negativ sein?

Kann die wirkende Kraft ( F=ma)

negativ sein? z.B. wenn ein Stein auf den Boden fehlt. Wirkt dann die Erde eine negative Kraft auf den Stein aus?

...zur Frage

Wie sehen sich die verschiedenen schweizer "Volksgruppen" sich untereinander?

Was sind so die gängigen Vorurteile von schweizerdeutschen gegenüber den französischsprachigen, bzw. den italienischsprachigen und andersrum? Gibt es da positive sowie negative Einstellungen? Wie sieht man sich? Was wird als typisch im Verhalten oder kulturell angesehen, Eigenarten etc.? Und was noch interessant wäre, wie sehen sich die französischsprachigen Schweizer im Vergleich zu den Franzosen? Und wie werden die Franzosen wahrgenommen?

...zur Frage

Pomeranzen/Zwergspitz, Erziehung und Verhalten?

Hallo,
Ich möchte mir in 1-2 Jahren einen Zwergspitz zulegen. (Bevor es wieder zu viele negative Kommentare gibt: es sind auch nur Hunde! Ich werde ihn weder in Kleidung stecken noch in Taschen rum tragen >:(!).

Aufjedenfall wollte ich einmal wissen ob ihr grundsätzlich schon Erfahrungen mit dieser Hunderasse habt und wenn ja welche?

Im Internet kann man viel über das Wesen lesen, aber in echt sieht es dann noch noch etwas anders aus :)

Ich würde mich sehr freuen wenn ihr mir etwas zu der Erziehung und dem Verhalten erzählen könntet :) vielen Dank schonmal 💕

...zur Frage

HTML Hintergrund zu klein?

Hallo zusammen, ich habe mir jetzt eine HTML Seite gemacht, aber irgendwie klappt das mit dem hintergrund nicht ganz. Der Hintergrund ist irgendwie zu klein. Also ich habe eine Farbe, kein Bild als background angegeben. Im Bield sieht man, was ich meine. Bitte helft mir. Ich bin verzweifelt. Bei dem transparenten steht ein Text. Auch in der schwarzen Box. Mein Body Code sieht wie folgt aus.

    html {
    background-color: beige
}

body {
    font-size: 16px;
    line-height: 1.5;
    margin: 0 auto;
    max-width: 1000;
    padding: 2em 2em 4em;
    margin-bottom: auto
}

body {
    background-color: aliceblue
}

LG Michael

...zur Frage

Ephedrin vs Amphetamin was wirkt stärker?

Was wirkt stärker und wie sieht es mit der Neurotoxität von beidem aus?

...zur Frage

Negative Wurzel irrational oder rational?

Heyho, ich habe mal eine Frage. In unserem Buch steht, dass die negative Wurzel aus 4 irrational sein soll. Aber warum sollte das sein? Und wie sieht es aus bei negative Wurzel aus 16, da soll es dann rational sein. Kann mir das bitte jemand detailliert erklären?

Danke :) Mfg

...zur Frage

Was möchtest Du wissen?