---
title: "Margin-top-strul"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/144338-margin-top-strul"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "bassebhu"
published: "2006-03-22T10:27:48.000Z"
updated: "2006-03-22T22:07:44.000Z"
replies: 5
views: 536
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/144338-margin-top-strul"
---

# Margin-top-strul

## #1 — bassebhu, 2006-03-22T10:27Z

Hej alla glada!

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 &nbsp; (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.

```
#container {
	margin-top:			10px;
	margin-left:			-490px;
	left:				50%;
	width:				980px;
	position:			absolute;
}
#content {
	height:				735px;
	background:			url(../images/bg.jpg) no-repeat;
}
#header {
	width:				980px;
	height:				79px;
	margin-top:			51px;
	margin-bottom:			23px;
	background:			url(../images/header.jpg) no-repeat;
}
#footer {
	margin-top:			10px;
	text-align:			center;
}
#start {
	width:				325px;
	margin-left:			37px;
	background:			url(../images/start.jpg) no-repeat;
}

[...]

<div id="container">

  <div id="content">[b]&nbsp;[/b]

    <div id="header">
    </div>

    <div id="start">
      Text...
    </div>

  </div>

  <div id="footer">
    Text...
  </div>

</div>
```

Förslag på annan lösning än att lägga dit ett &nbsp;?

Taxi!

Permalänk: https://www.webforum.nu/p/144338

## #2 — zcorpan, 2006-03-22T12:11Z

Jag har en känsla av att det har med [kollapsande marginaler](http://www.w3.org/TR/CSS21/box.html#collapsing-margins) att göra. Lägg dit padding-top:1px för att förhindra det.

Permalänk: https://www.webforum.nu/p/1786246

## #3 — bassebhu, 2006-03-22T21:08Z

> **zcorpan skrev:**
>
> Jag har en känsla av att det har med [kollapsande marginaler](http://www.w3.org/TR/CSS21/box.html#collapsing-margins) 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?

Permalänk: https://www.webforum.nu/p/1786490

## #4 — zcorpan, 2006-03-22T21:17Z

> **bassebhu skrev:**
>
> 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.

Permalänk: https://www.webforum.nu/p/1786498

## #5 — bassebhu, 2006-03-22T21:43Z

Ändrade till padding i stället. Det funkade, men jag förstår fortfarande inte varför mariginalerna inte ville fungera. Nåja.

Permalänk: https://www.webforum.nu/p/1786508

## #6 — zcorpan, 2006-03-22T22:07Z

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'. :)

Permalänk: https://www.webforum.nu/p/1786517

---

Tråden på webben: https://www.webforum.nu/amne/html-css/144338-margin-top-strul
