3 Stimmen

Ist das ein Fehler? Die Ränder des P-Elements gehen über das enthaltende div hinaus.

Ich benutze Firefox3 auf Ubuntu (Und ich habe einen Fehler in SO gefunden, während ich dabei war :-D) Das erwartete Verhalten ist, keinen Rand zwischen den DIVs zu sehen, während ein Rand angezeigt wird, der von den P-Rändern stammt.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <style>
        p{
            background-color: transparent;
            margin: 10px;
            color: white;
        }
        div{
            background-color: black;
            margin:0;
            width: 300px;
        }
   </style>
</head>
<body>
   <div>
        <p>aaaaaaaaaaa</p>
        <p>bbbbbbbbbbb</p>
        <p>ccccccccccc</p>
   </div> 
   <div>
        <p>aaaaaaaaaaa</p>
        <p>bbbbbbbbbbb</p>
        <p>ccccccccccc</p>
   </div> 
</body>
</html>

14voto

Simon Lehmann Punkte 10334

Dies ist das Verhalten, wie es im CSS-Box-Modell definiert ist:

8.3.1 Zusammenbrechende Margen

In dieser Spezifikation wird der Ausdruck kollabierende Ränder bedeutet, dass aneinandergrenzende Ränder (keine Füllung oder Randbereiche trennen sie) von zwei oder Boxen (die nebeneinander liegen können nebeneinander oder verschachtelt) zu einem einzigen Rand.

In CSS2 werden die horizontalen Ränder nie kollabieren.

Vertikale Ränder können sich zwischen bestimmten Feldern:

  • Zwei oder mehr aneinandergrenzende vertikale Ränder von Blockkästen im normalen Fluss fallen zusammen. Die resultierende Randbreite ist das Maximum der angrenzenden Randbreiten. Im Falle negativer Ränder wird das absolute Maximum der negativen angrenzenden Ränder vom Maximum der positiven angrenzenden Ränder abgezogen. Gibt es keine positiven Seitenränder, wird das absolute Maximum der negativen angrenzenden Seitenränder von Null abgezogen.
  • Vertikale Ränder zwischen einem schwebenden Rahmen und einem anderen Rahmen werden nicht reduziert.
  • Die Ränder von absolut und relativ positionierten Feldern werden nicht kollabiert.

http://www.w3.org/TR/CSS2/box.html

Der Grundgedanke dahinter könnte sein, dass Sie, wenn Sie einen (vertikalen) Rand für etwas festlegen, nur sicherstellen wollen, dass mindestens so viel Platz zwischen dem Rand oder der Auffüllung dieses Elements und dem Rand oder der Auffüllung des nächsten Elements (z. B. zwei Absätze) bleibt.

Wenn Sie möchten, dass der Rand im div enthalten ist (d.h., dass das div sich ausdehnt), müssen Sie oben und unten im div eine Polsterung oder einen Rahmen festlegen.

0voto

SirDemon Punkte 1750

Ich habe das gerade mit FF unter Windows überprüft, und die p-Elemente sind so enthalten, wie sie sein sollten, und nicht außerhalb des div. Auch im IE7 sieht es gut aus.

Probieren Sie aus, was passiert, wenn Sie alle Elemente mit Rahmen versehen.

Tut mir leid, dass ich Ihnen nicht weiterhelfen kann.

0voto

phihag Punkte 261131

Als Simon Lehmann schrieb ist dies das richtige Verhalten. Es sieht so aus, als ob Sie nach folgendem suchen p{padding:100px;} .

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X