Oben und unten immer gleiche Abstände mit CSS

[Marx Marx]

Ein herzliches Hallo, in die Runde,

wie kann ich es mit CSS umsetzen, dass zwischen Objekten der Abstand immer gleich ist und zwar Pixelgenau?

Viele Dank und viele Grüße

Marc

[Robert B.]

Hallo Marc,

wie kann ich es mit CSS umsetzen, dass zwischen Objekten der Abstand immer gleich ist und zwar Pixelgenau?

der Außenabstand heißt (in CSS) margin.

Viele Grüße
Robert

[Rolf B]

Hallo Marx,

Der Selfhtml-Standpunkt ist: Lass Das Sein! Pixelgenaues Layout ist sowas von 90er, das tut man heute nicht mehr. Die Abstände sollten mit der Schriftgröße skalieren. Denn deine User können die Textgröße zoomen, ein pixelgenaues Layout geht daran zumeist kaputt. Setze deine Abstände in relativen Einheiten wie em, dann skalieren sie mit.

Wenn Du in der Situation bist, auf ein pixelgenaues Layout aus irgendwelchen Gründen angewiesen zu sein, lautet die erste Antwort, wie von Robert: margin-top und margin-bottom.

Es gibt dabei aber einiges zu beachten.

• Außer margin gibt es auch padding, was Zusatzabstände herbeiführen kann

• Inline-Elemente werden auf die Baseline von Text gesetzt. Ein Bild in einem div ist ein inline-Element, und die Text-Baseline ist nicht ganz unten im div, sondern etwas höher, um Schriften mit Unterlängen anzeigen zu können (also beispielsweise der untere Bogen im g). D.h. unter einem Bild ist immer etwas "Luft". Um das zu beheben, musst Du ihm ggf. display:inline-block zuweisen.

• Margins können zusammenfallen. Wenn eine Überschrift einen margin-botton von 30px hat und der nachfolgende Paragraph einen margin-top von 30px, dann ist der Abstand zwischen den beiden... 30px. Der kleinere Margin geht im größeren auf.

• Das Zusammenfallen von Margins kann entfallen, wenn ein neuer Blockformatierungskontext entsteht. MDN listet eine scheußliche Menge von Auslösern für BFC aus, die wichtigsten sind overflow:hidden und float.

Es ist nicht einfach und kann unter Umständen in eine wilde Jagd nach den Gründen für das Margin-Verhalten ausarten. Dabei helfen die Browser-Entwicklerwerkzeuge ein wenig, aber manchmal sitzt man trotzdem noch davor und verflucht den Browser. Prüfe bitte, ob Du mit Grid-Layout und einem gap deine Ziele einfacher erreichen kannst. Das bringt einen zwar gelegentlich auch zum Fluchen, ist aber eigentlich logischer.

Rolf

[MudGuard]

Hi,

Es gibt dabei aber einiges zu beachten.

• Außer margin gibt es auch padding, was Zusatzabstände herbeiführen kann

und border - die kann transparent ^[1] sein, oder dieselbe Farbe wie der Hintergrund haben …

cu,
Andreas a/k/a MudGuard

---

1. oder ist transparent nur bei background-color zulässig? Die Möglichkeit mit der border in Hintergrundfarbe bleibt aber … ↩︎

[Rolf B]

Hallo MudGuard,

transparent nur bei background-color zulässig?

Im Zweifelsfall nimmst du halt rgba(0,0,0,0) oder #0000.

Aber es ist auch zulässig.

Wie auch immer, auf diese abgedrehte Idee bin ich nicht gekommen. Und weiteren Schabernack wie transform:translate oder position:relative-Spielereien habe ich auch erstmal ausgeklammert.

Rolf

[MudGuard]

Hi,

Wie auch immer, auf diese abgedrehte Idee bin ich nicht gekommen.

Darum hab ich das ja ergänzt.

Und weiteren Schabernack wie transform:translate oder position:relative-Spielereien habe ich auch erstmal ausgeklammert.

oh ja, oder auch rotate um 180° um einen Punkt ober/unterhalb der Mittellinie ...

cu,
Andreas a/k/a MudGuard

[JürgenB]

Hallo Andreas,

oh ja, oder auch rotate um 180° um einen Punkt ober/unterhalb der Mittellinie ...

in diesem Umfeld ist die Politikerwende (360°) zum Glück unkritisch.

Gruß
Jürgen

[MudGuard]

Hi,

Im Zweifelsfall nimmst du halt rgba(0,0,0,0) oder #0000.

hm, ne, transparentes Schwarz ist mir zu traurig.

Wenn schon mit rgba, dann rgba(255,255,255,0) - sieht doch gleich viel freundlicher aus 😉

cu,
Andreas a/k/a MudGuard

[Der Martin]

Hallo,

Im Zweifelsfall nimmst du halt rgba(0,0,0,0) oder #0000.

hm, ne, transparentes Schwarz ist mir zu traurig.

fast-transparentes Schwarz kann aber auch edel aussehen. Zum Beispiel bei Strumpfhosen.
Kommt dann noch ein bisschen drauf an, was für Beine drinstecken ...

Live long and pros healthy,
 Martin

[Gunnar Bittersmann]

@@Rolf B

transparent nur bei background-color zulässig?

Nein, natürlich nicht.

Im Zweifelsfall nimmst du halt rgba(0,0,0,0) oder #0000.

Weil’s im Uralt-IE genauso aussehen muss? 🤣

Die neue Syntax ist rgb(0 0 0 / 0). Und ja: rgb. rgba ist ein Alias dafür.

Und da gibt’s keine Zweifel: das sollte man nicht nehmen. transparent ist ein Keyword dafür. Und selbsterklärender Code.

😷 LLAP

[Marx Marx]

Hallo an alle,

vielen lieben Dank an Euch! Ihr habt mir sehr weitergeholfen.

Viele Grüße

Marc