nicht angemeldet
Problem mit padding:0 - trotzdem Abstand nach oben-mit Quellcode
Hallo!
obwohl es einfach aussieht, habe ich mit unten angefügter Seite ein Problem. Die gelbe Box sollte eigentlich bis nach oben gehen, leider habe ich totz padding: 0; und margin: 0; oben einen Rand.
Vielleicht kann sich das ja mal jemand anschauen, und mir auf die Sprünge helfen. Warum habe ich oben einen kleinen Abstand und wie bekomme ich diesen weg?
Liebe Grüße
Werner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Titel</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
background-color: #FFE4B5;
font-family: Arial,Helvetica,sans-serif;
font-size: 16px;
color: #000;
}
#leiste {
height: 80px;
border-bottom: 1px solid #000;
background: yellow;
}
</style>
</head>
<body>
<div id="leiste">
<p>Beispieltext. Beispieltext. Beispieltext. Beispieltext. Beispieltext.</p>
</div>
</body>
</html>
-
Hallo,
margin: 0;
padding: 0;Was denn? 0 Eier, 0 Äpfel oder 0 Pflaumen? Also eine Einheit müsstest du schon angeben!
Gruß
Lachgas-
Hallo N2O,
margin: 0;
padding: 0;Was denn? 0 Eier, 0 Äpfel oder 0 Pflaumen? Also eine Einheit müsstest du schon angeben!
Nein, muss er nicht.
@N2O: Versuchs mal, indem du auch für das Element "html" margin und padding auf 0 setzt.
Gruss aus Luzern,
Daniel-
Hallo,
@N2O: Versuchs mal, indem du auch für das Element "html" margin und padding auf 0 setzt.
Das wars leider nicht ;-) Wenn du folgende CSS-Definition hinzufügst, klappts:
p {
margin-top:0;
}Gruss aus Luzern,
Daniel-
p {
margin-top:0;
}So geht es, danke. Lag der Fehler nun an mir oder ist das ein Mozilla-Bug? (Im IE wird es korrekt angezeigt)
-
Hallo,
p {
margin-top:0;
}So geht es, danke. Lag der Fehler nun an mir oder ist das ein Mozilla-Bug? (Im IE wird es korrekt angezeigt)
Kann an unterschiedlichen Default-Einstellungen der verschiedenen Browser liegen, wenn Du keine Werte explizit angibst. Ich habe, nachdem ich von mir erstellte Seiten mit FF 1.0 getestet habe, ein paar Werte zusätzlich in die Stylesheets aufgenommen, weil die Darstellung anders war als im Mozilla und im IE.
Viele Grüße
Frank -
Hi,
p {
margin-top:0;
}
So geht es, danke. Lag der Fehler nun an mir oder ist das ein Mozilla-Bug? (Im IE wird es korrekt angezeigt)Da es keine Vorschriften über den margin-top von p-Elementen gibt, ist ein von 0 abweichender margin-top für p-Elemente kein Fehler.
Warum sich daraus der margin fürs div ergibt? Siehe https://forum.selfhtml.org/?t=97419&m=592956cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
-
-
-
Hallo Lachgas
Was denn? 0 Eier, 0 Äpfel oder 0 Pflaumen? Also eine Einheit müsstest du schon angeben!
Was soll der Blödsinn?
Bei 0 ist keine Einheit erforderlich.
Oder besteht für dich ein Unterschied zwischen 0 Eiern, 0 Äpfeln oder 0 Pflaumen? ;)Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin! -
Hallo,
margin: 0;
padding: 0;Was denn? 0 Eier, 0 Äpfel oder 0 Pflaumen? Also eine Einheit müsstest du schon angeben!
Naja bei "0" ist das wohl weniger kritisch denn es ist ja prinzipiell egal ob es 0px, 0em, 0cm, oder was auch immer ist, obwohl es nicht flash ist sich anzugewöhnen auch bei "0" eine Einheit zu schreiben. Aber das ist IMHO nicht der Fehler.
Aber überleg doch mal was das <p> als Blockelement produziert.
Schöne Grüße,
TeraVolt -
Was denn? 0 Eier, 0 Äpfel oder 0 Pflaumen? Also eine Einheit müsstest du schon angeben!
Laut selfhtml nicht. :p
-
-
Hallo Werner
Vielleicht kann sich das ja mal jemand anschauen, und mir auf die Sprünge helfen. Warum habe ich oben einen kleinen Abstand und wie bekomme ich diesen weg?
Ich kann dies im Mozilla 1.7.3 nachvollziehen. Meiner Meinung nach dürfte dort oben kein Rand sein, der Mozilla hält es aber nicht für nötig, den
Bereich einzufärben, der keinen Inhalt (oberen margin des p) hat.Mögliche Lösungen:
p {margin-top:0;}
oder
#leiste {
height: 80px;
border-bottom: 1px solid #000;border-top: 1px solid yellow;
background: yellow;
}Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hi,
Ich kann dies im Mozilla 1.7.3 nachvollziehen. Meiner Meinung nach dürfte dort oben kein Rand sein, der Mozilla hält es aber nicht für nötig, den
Bereich einzufärben, der keinen Inhalt (oberen margin des p) hat.Doch, der Rand muß da sein.
Wie Du ja selbst festgestellt hast, hat
p {margin-top:0;}
einen von 0 abweichenden oberen margin.
http://www.w3.org/TR/REC-CSS2/box.html#collapsing-margins sagt:
Two or more adjoining vertical margins of block boxes in the normal flow collapse. The resulting margin width is the maximum of the adjoining margin widths.
Hier sind die beiden top margins von div und p aneinandergrenzend (adjoining), also ist der resultierende margin das Maximum der beiden (div hat normalerweise einen margin von 0, also ist es der margin des p, der das Maximum darstellt.
Der margin-Bereich ist im Gegensatz zum padding nicht mit Hintergrundfarbe versehen.
Mozilla verhält sich also absolut korrekt.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.-
Hallo Andreas
Hier sind die beiden top margins von div und p aneinandergrenzend (adjoining), also ist der resultierende margin das Maximum der beiden (div hat normalerweise einen margin von 0, also ist es der margin des p, der das Maximum darstellt.
Ich hatte dies auf die margins aneinandergrenzender Elemente bezogen, nicht
auf Eltern- und Kindelemente, was ich äußerst unlogisch finde.Der margin-Bereich ist im Gegensatz zum padding nicht mit Hintergrundfarbe versehen.
Wobei dieser Bereich nach meinem bisherigen Verständnis zwar der Margin des
p aber das Innere des div wäre.Bei aneinandergrenzenden Elementen finde ich diese Regel durchaus sinnvoll
und nachvollziehbar, bei verschachtelten Elementen nicht.
So ergeben sich durch einen einfachen Border vollständig andere Abstände,
weil die margins dadurch ja nicht mehr aneinandgrenzen.Aber gut, wieder etwas gelernt, danke Andreas.
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hi,
Ich hatte dies auf die margins aneinandergrenzender Elemente bezogen, nicht
auf Eltern- und Kindelemente, was ich äußerst unlogisch finde.Dann hätte es statt
Two or more adjoining vertical margins of block boxes in the normal flow collapse.
heißen müssen:
Vertical margins of two or more adjoining block boxes in the normal flow collapse.cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
-
-