suntrop
Erfahrenes Mitglied
Hallo,
ich bin mir recht sicher, dass ich vor einigen Monaten mal etwas in dieser Richtung gelesen hatte. Nur finde ich den Artikel nicht mehr :-(
Folgende Sachlage: Ein DIV verhält sich anders - wenn in ihm ein Element mit Abstand definiert ist - je nachdem, ob der DIV border hat oder nicht.
Beispiel:
Gibt mit dem DIV per CSS einen Rahmen (border: 1px solid red; ), dann wird das H1 Element mit einem Abstand von 50px oben und unten zum Rand des umfließenden DIV Elements dargestellt (siehe Anhang 1).
Entfernt man den Rahmen (border: 0px solid red; ), dann verschwindet das umfließende DIV Element oben und unten (siehe Anhang 2).
Da der IE es anders anzeigt und dessen Renderingengine, milde gesagt, Schrott ist, denke ich, zeigt es der FF korrekt an und es gehört zu den Sachen bei denen ich das W3C nicht verstehe. Warum erbt das H1 Element den Abstand? Es soll sich doch nichts ändern, wenn ein Rahmen da ist (oder eben nicht)!
Ich habe zwar einen blöden Fix für das Problem (border-top: 0.1px solid #Farbe_des_Hintergrundes), aber zufriedener macht mich das nicht.
Meine Frage:
Ist die Darstellung tatsächlich korrekt?
Gibt es andere Möglichkeiten ohne Rahmen einen Abstand zwischen den Elementen herzustellen?
Wie verhält sich das im Allgemeinen mit der Vererbung von Abständen? Ich kenne (glaube ich zumindest) das Boxmodel, aber wie sich das bei Verschachtelungen verhält war mir wohl bis dato nicht bekannt.
Grüße
suntrop
ich bin mir recht sicher, dass ich vor einigen Monaten mal etwas in dieser Richtung gelesen hatte. Nur finde ich den Artikel nicht mehr :-(
Folgende Sachlage: Ein DIV verhält sich anders - wenn in ihm ein Element mit Abstand definiert ist - je nachdem, ob der DIV border hat oder nicht.
Beispiel:
HTML:
<!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" />
<title>CSS Abstand</title>
<style type="text/css">
<!--
div {
border: 1px solid red;
background: #fc6;
}
h1 {
margin: 50px;
border: 1px solid green;
background: #669;
}
-->
</style>
</head>
<body>
<div>
<h1>Überschrift</h1>
</div>
</body>
</html>Entfernt man den Rahmen (border: 0px solid red; ), dann verschwindet das umfließende DIV Element oben und unten (siehe Anhang 2).
Da der IE es anders anzeigt und dessen Renderingengine, milde gesagt, Schrott ist, denke ich, zeigt es der FF korrekt an und es gehört zu den Sachen bei denen ich das W3C nicht verstehe. Warum erbt das H1 Element den Abstand? Es soll sich doch nichts ändern, wenn ein Rahmen da ist (oder eben nicht)!
Ich habe zwar einen blöden Fix für das Problem (border-top: 0.1px solid #Farbe_des_Hintergrundes), aber zufriedener macht mich das nicht.
Meine Frage:
Ist die Darstellung tatsächlich korrekt?
Gibt es andere Möglichkeiten ohne Rahmen einen Abstand zwischen den Elementen herzustellen?
Wie verhält sich das im Allgemeinen mit der Vererbung von Abständen? Ich kenne (glaube ich zumindest) das Boxmodel, aber wie sich das bei Verschachtelungen verhält war mir wohl bis dato nicht bekannt.
Grüße
suntrop
