Margin top/bottom behaving strangely?

HTML & CSS
1

I’m working on a project, but I’ve been stuck trying to figure out a styling issue for a few hours now. The problem is, it appears to be terrifyingly simple.

I have simplified the problem down to two divs. Both identical, each with a margin of 5px (all sides). In every single browser, this renders with only 5px in between the two divs. It essentially ignores one of the margins completely.

In other words, I am having problems with the top and bottom margins.

Here’s an simple example which illustrates my point.


<html>
<head>
<style type="text/css">
p { background-color:yellow; }

p.margin {
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
}

div { background: #CCC; }
</style>
</head>
<body>
	<p>This is a paragraph with no specified margins.</p>
	<div>
		<p class="margin">This is a paragraph with specified margins.</p>
	</div>
</body>
</html>

For some reason, the #CCC background does not extend to the limits of the margin on top and bottom.

-HOWEVER-

What’s even stranger, is that when you add a border to the div, say:

border: 1px solid #FF0000;

The entire thing corrects itself and displays correctly.

I’d greatly appreciate it if somebody could explain to my why this problem is occurring.

Thank you very much,
-Dakota

2

the bg colour extends without problems if I use padding instead of margin.

3

your code is working as it should in my IE8.

have a look at the css box model. hopefully it will clear things up for you.

I think you’ll need to use padding instead of margin.

4

Here’s an image of the problem. I’m running Mac OSX, which I now suspect to be the culprit if it works in IE8. Nevertheless, it is a problem.

5

Do you have a screenshot of that? I’ve seen it in all mayor browsers and it’s working fine indeed as mentioned.

6

in ie8 the code works as you described and that is the way it should work.

have a look at the css box model and it will explain why you need padding instead of margin.

7

Sorry but I don’t agree. I don’t see padding as the right way to position!

8

maybe I’m misunderstanding what the op wants.

I think he/she wants to extend the background colour to where the margin is.

For some reason, the #CCC background does not extend to the limits of the margin on top and bottom.

9

The way I read it is that the OP want a margin between to divs. Margin should be 10px (5 from each div) but apparently shrinks to 5px.

Edit: @Dakota G Is there another div holding these two divs, using a top/bottom margin as well?

10

@donboe, I just posted a screenshot, but it says “Pending approval”.

@kalon, I understand the box model, but my computer does not seem to be rendering the margins correctly.


<html>
<head></head>
<body style="margin: 0;">
	<div style="margin: 5px;">
		Text 1
	</div>
	<div style="margin: 5px;">
		Text 2
	</div>
</body>

There should be 10px in between the two divs (so I understand) but my computer renders only 5px. The margins of each div seem to overlap eachother.

EDIT***

To clarify, my problem is about margins rendering incorrectly. The problem in the project I am working on is that 10px gets reduced to 5px. The code I posted originally is simply an example of what causes the margins to be rendered incorrectly on my computer.

11

I could understand this if there would be a parent holding these two divs using a top/bottom margin as well. Because than you experience collapsing margins. As a tryout, try to give both divs a top-border of 1 px or top-padding of 1 px;

Off Topic:

You should not use inline styles; <div style=“margin: 5px;”>. Use CSS instead:


.box {
  margin: 5px;
}



<div class="box">
12

Well I just read about collapsing margins, and they are definitely the problem I am experiencing. I didn’t even know margins did that. Well I guess I’ll have to find a workaround for that. Thanks for all your help guys.

EDIT*** I was wondering why this problem of collapsing margins wasn’t occurring in one of my other documents. The difference was that those divs were floating and apparently floating objects never have collapsed margins.

13

If you don’t use floats the workaround could be the border you used before, with the same color as your background.

14

Well those were just examples which didn’t really relate at all to my project. I realize now that they were just examples of collapsing margins.

I fixed the problem by simply floating all of the divs.

Thanks for the help.