[prm]

Hallo,

beim Versuch, eine Box mit abgerundeten Ecken mittels Hintergrundgrafik darzustellen, macht mir der FF einen Strich durch die Rechnung:
Bei der Überschrift <h> stellt die klasse ".box" deren "natürlichen" margin-top-Wert als weiße Lücke dar.
Ebenso beim letzten Absatz den margin-bottom-Wert von <p>:

CSS:

.top
{
background: url(top.gif);
width: 300px;
height: 15px;
}

.bottom
{
background: url(bottom.gif);
width: 300px;
height: 15px;
} 

.box
{
width: 280px;
background: #ffbf00;
padding: 0 10px;
}

HTML:

<div class="top"></div>
<div class="box">
<h3>Box mit abgerundeten Ecken</h3>
<p>
Mit Hilfe zweier Hintergrundgrafiken kann man auch bei einem CSS-basierten Layout Boxen mit abgerundeten Ecken darstellen.
</p>
<p>
Erforderlich ist eine top- und bottom-Grafik mit den abgerundeten Ecken sowie eine identische Hintergrundfarbe für die Box.
</p>
</div>
<div class="bottom"></div>

.top und .bottom enthalten je eine Hintergrundgrafik mit abgerundeten Ecken, 300px auf 15px

Normalerweise werden doch div's direkt untereinander angeordnet (sofern kein margin-Wert definiert ist), unabhängig von den darin befindlichen Elementen.

[fricca]

Zitat von prm

Normalerweise werden doch div's direkt untereinander angeordnet (sofern kein margin-Wert definiert ist),

Es sind aber margins definiert, nämlich diejenigen, die du "natürlich" nennst.

unabhängig von den darin befindlichen Elementen.

Nein, das ist nicht unabhängig. Suchfunktion: "Collapsing Margins".

[prm]

Danke, ist mir bisher noch nie aufgefallen.