nicht angemeldet
CSS-Problem: Abstand über Div
Friedel
0 
Matthias Apsel
0 Friedel
0 Fred
0 0 Friedel
CSS-Problem: Abstand über Div
Friedel
Seht euch am besten das Beispiel an.
Ich habe eine Seite, in der mit
* {
margin:0; padding:0;}
alle Abstände genullt sein sollten. Darin sind 2 Div, das erste mit float:left;
Das zweite Div hat margin:1em auto 1em auto;. Warum bekommt das erste Div dadurch nach oben einen Abstand??? Wenn ich im 2. Div margin:0 auto 1em auto; angebe, ist das erste Div ganz oben.
akzeptierte Antworten
CSS-Problem: Abstand über Div
Bewertung: keine Bewertung
-
Hallo Friedel,
Ich habe eine Seite, in der mit
* { margin:0; padding:0;}alle Abstände genullt sein sollten.
Das ist eine ganz schlechte Idee. Alle Default-Einstellungen sind sinnvoll und die meisten sind browserübergreifend sehr ähnlich. Sinnvoll ist eine Normalisierung für Listenelemente.
Mit deiner Frage habe ich mich noch nicht beschäftigt.
Bis demnächst
Matthias--
Rosen sind rot.-
Das ist eine Testseite.
* { margin:0; padding:0;}habe ich nur eingebaut, um möglichst viele Ursachen ausschließen zu können. Ich habe nicht vor, das so ein meiner Homepage zu verwenden. Diese Testseite existiert überhaupt nur, weil ich herausfinden will, warum sich in meiner Homepage die Navi verschiebt, wenn ich dem Content-Div ein margin-top gebe.
-
-
Hi,
durch das float sind die Divs aus dem Fluß, das Margin des zweiten Div lässt den Body um 1em nach unten rutschen. Gib dem navidiv -1em mit, dann passt es.
Besser wären natürlich auf float zu verzichten und display flex oder grid einzusetzen.
Fred
Seht euch am besten das Beispiel an.
Ich habe eine Seite, in der mit
* { margin:0; padding:0;}alle Abstände genullt sein sollten. Darin sind 2 Div, das erste mit
float:left;Das zweite Div hatmargin:1em auto 1em auto;. Warum bekommt das erste Div dadurch nach oben einen Abstand??? Wenn ich im 2. Divmargin:0 auto 1em auto;angebe, ist das erste Div ganz oben.--
I � Unicode -
Hallo
Die eigentliche Ursache für dein vermeintliches Problem sind die "Collapsing Margins".
Das von dir beobachtete Verhalten ist also genau so vorgesehen.
Du musst die "Collapsing Margins" halt unterdrücken. Dafür gibt es verschiedene Möglichkeiten.
Damit die Auswirkungen besser sichtbar sind kannst du zunächst dem zweiten div (content) folgendes margin zuweisen:
margin:10em auto 1em auto;Beide div rutschen dadurch erst einmal deutlich runter.
Dann kannst du zum Beispiel vor dem ersten div eine Überschrift eingeben, also
<body> <h1>Überschrift</h1> <div id="navidiv">Warum ist über diesem Div ein roter Streifen?und das Ergebnis anschauen.
Danach als weitere Möglichkeit die Überschrift wieder löschen und dem body einen oberen Rand von 1px zuweisen:
body { background-color: #f88; border-top: 1px solid blue; }Als Farbe kannst du zum Beispiel auch transparent auswählen, die ist also egal.
Und schauen.
Für weitere Infos kannst du "Collapsing Margins" in die Suchmaschine deiner Wahl eingeben.
Float und Flexbox haben vollkommen unterschiedliche Aufgaben. Float läßt sich deshalb nur durch Flexbox ersetzen, wenn es mißbräuchlich eingesetzt wurde.
Wenn der Text des zweiten div das kleinere erste div umfließen soll läßt sich Float nicht durch Flexbox ersetzen, da es korrekt verwendet wurde. Mit Flexbox könnten die "nur" nebeneinander gestellt werden.
Richtig ist hingegen, das bei Flexbox grundsätzlich die "Collapsing Margins" unterdrückt werden.
Das läßt sich beobachten wenn zunächst mehrere Absätze (p-Elemente) in einen Container (zum Beispiel article-Element) geschrieben werden, die ganz normal obere und untere Abstände (margin) haben.
Wenn anschließend die Absätze mit Flexbox und "flex-direction: column;" angeordnet werden, werden die Abstände zwischen ihnen größer, da die "Collapsing Margins" unterdrückt werden.
Gruss
MrMurphy
-
Ich danke euch beiden. Mit der Flexbox habe ich mich schon ein wenig befasst, wobei ich sie aber noch nie angewendet habe. Ich habe ja mehr als 10 Jahre fast nichts mit Websites gemacht. Aber MrMurphy1 bestätigt ja meine Ansicht, dass in meinem Fall float das Mittel der Wahl ist, denn das erste Div soll vom Inhalt des 2. umflossen werden.
Die Ursache für mein Problem habe ich schon mit den Suchbegriffen, die ich aus der Antwort von Fred habe, schnell gefunden. Wenn man die Ursache kennt, ist eine Lösung schnell gefunden. Natürlich wäre es auch mir einem negativen margin-top im navidiv gegangen, aber wie meist führen viele Wege nach Grootfontein. Ich habe das #navidiv nicht verändert und das #content angepasst. Mit margin-top:0; padding-top:1em; verschwindet der Streifen ja auch.
-