Jag tror att jag har stött på en bugg eller så tänker jag lite knasigt.
I Safari så måste jag lägga dit (eller kanske något annat men det visade sig fungera), annars så hamnar margin-top-värdet som jag har satt på #header även på #content, trots att inget margin-värde finns inskrivet på #content! Som att den tar mariginal från #container i stället för ifrån #content.
Jag har en känsla av att det har med kollapsande marginaler att göra. Lägg dit padding-top:1px för att förhindra det.
Verkar fungera, men kommer den nu att ta mariginalen + 1px så att jag borde minska mariginalen med -1px för att kompensera? Kommer detta i så fall att fungera som jag vill i alla/de flesta läsare?
Verkar fungera, men kommer den nu att ta mariginalen + 1px så att jag borde minska mariginalen med -1px för att kompensera? Kommer detta i så fall att fungera som jag vill i alla/de flesta läsare?
Att minska med -1px, är inte det samma sak som att öka med 1px? ;)
Men jo, det borde fungera. Beroende på omständigheterna kanske du till och med kan använda padding istället för margin.
Det är helt enkelt så marginaler fungerar. Testa följande:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>kollapsande marginaler</title>
<style type="text/css">
p { margin:5em 0; }
div { background:lime; }
</style>
</head>
<body>
<div>
<p>foo</p>
</div>
<p>bar</p>
</body>
</html>
Notera hur "foo"s marginaler går utanför DIVen, och att mellanrummet mellan "foo" och "bar" är 5em och inte 10em. Det beror på att marginalerna överlappar varandra (de "kollapsar"). Testa också att byta ut 'margin' mot 'padding'. :)
257 ms totalt · 4 externa anrop · v20260731065814-full.86ec41c2
