Margin wirkt sich über übergeordneten Container hinaus aus
0 0 
Detlef G.
Margin wirkt sich über übergeordneten Container hinaus aus
Gunnar BittersmannHallo alle zusammen,
Folgendes Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS-Test</title>
<style type="text/css">
#box1, #box2, #box3, #box4 {
width: 500px;
height: 200px;
/* border: 1px solid black; */
}
#box1 {
background-color: blue;
}
#box2 {
background-color: red;
}
</style>
</head>
<body>
<div id="box1">
</div>
<div id="box2">
<p>Text</p>
</div>
<hr>
<div id="box1">
</div>
<div id="box2">
</div>
</body>
</html>
Wie man sieht, verschiebt der Absatz gleich den ganzen Container mit nach unten, anstatt nur sich selbst innerhalb den Containers nach unten zu schieben.
Setzt man jetzt allerdings den Border (auskommentiert) ist plötzlich alles wieder korrekt.
Kann mir das jemand erklären? Ist das tatsächlich eine CSS-Spezifikation?
Wenn ja, kann man das auch anders lösen, als einen Border zu setzen?
viele Grüße,
Tobias
PS: Ohne die Doctype-Angabe zeigt der IE es ohne Abstand an.
-
Hi,
Wie man sieht, verschiebt der Absatz gleich den ganzen Container mit nach unten, anstatt nur sich selbst innerhalb den Containers nach unten zu schieben.
Setzt man jetzt allerdings den Border (auskommentiert) ist plötzlich alles wieder korrekt.Kann mir das jemand erklären?
http://www.w3.org/TR/CSS21/box.html#collapsing-margins:
“The top margin of an in-flow block element collapses with its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance.”MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
http://www.w3.org/TR/CSS21/box.html#collapsing-margins:
“The top margin of an in-flow block element collapses with its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance.”Hey Chris,
Vielen dank für den Link, das mit dem margin ist mir auch schon aufgefallen.
Für diese Spezifikation wird es ja höchstwahrscheinlich einen Grund geben (kann den jemand erläutern?), aber doof ist es trotzdem.
Ich wollte es eigentlich vermeiden, aber dann muss wohl ein 1px margin herhalten.Vielen dank euch allen.
MfG
Tobias-
[...], aber dann muss wohl ein 1px margin herhalten.
Upps, 1px padding natürlich.
Sorry, kann man ja nicht editieren.-
@@Tobias H:
nuqneH
[...], aber dann muss wohl ein 1px margin herhalten.
Upps, 1px padding natürlich.Nö, das allmächtige 'overflow: hidden' tut’s auch.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Ok alles klar.
Nur blöderweise habe ich genau in diesem Container einen (beabsichtigten) overflow... ;-)
-
-
-
-
-
Hallo Tobias,
ChrisB hat dir die Spezifikation ja bereits verlinkt.
Wenn ja, kann man das auch anders lösen, als einen Border zu setzen?
Du musst die margins voneinander trennen. Dass könntest du durch border (in Hintergrundfarbe) aber auch durch padding erreichen.
PS: Ohne die Doctype-Angabe zeigt der IE es ohne Abstand an.
Dann befindet er sich im IchscheißeaufdieSpezifikationundratemalwieeswohlgemeintseinkönnte-Modus.
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hallo Tobias,
PS: Ohne die Doctype-Angabe zeigt der IE es ohne Abstand an.
Dann befindet er sich im IchscheißeaufdieSpezifikationundratemalwieeswohlgemeintseinkönnte-Modus.
Detlef meint den Quirks-Modus, in dem der IE versucht, typische Anfängerfehler dadurch zu eliminieren, dass er rumrät, was Du gemeint haben könntest. Das klappt sogar manchmal ganz gut - leider sieht es dann in allen anderen Browsern umso schlimmer aus - zum Besipiel in dem in Deutschland am meisten verwendeten Firefox.
Einzige Methode das zu verhindern: halte Dich an die Standards!
Und immer schön validieren!
Marc
-