MarginTop applying to the body

Question

I'm working on a website, I'm trying to integrate a little addon.

I have a problem that i already faced but i forgot how to resolve it.

this is the site : http://www.journaldunet.com/solutions/mobilite/ios-9.shtml

Basically, when you add a margin-top to the elements inside the body, this margin-top is applied also to the body. I have actually no idea how to fix it.

The site is responsive so I can't do a because it's won't be responsive anymore

#mydiv{
position:absolute;
width:1000px;
margin:auto;
}

Do someone have an idea?

EDIT : Found the solution. overflow isn't working, so i had to do a little trick (which in this case works). It's not clean, but it do the trick.

body{
padding-top:1px;
margin-top:-1px;
}

thx

Could you narrow your problem by editing [this fiddle](http://jsfiddle.net/421o3yd1/)? It seems margin-top is NOT propagated to the body. Something else have to cause it. — Jan Turoň, Sep 11 '15 at 13:25
It was a classic margin-collapsing problem. I didn't knew this was the name of the problem so i couldn't find proper answer. Now with a little google search about margin collapsing I found the solution there : http://stackoverflow.com/questions/19718634/how-to-disable-margin-collapsing — Bobby, Sep 11 '15 at 13:31

Praveen Kumar Purushothaman · Accepted Answer · 2015-09-11T14:36:21.017

4

The whole CSS is valid:

#mydiv{
position:absolute;
width:1000p;
margin-auto;
}

Change it to:

#mydiv{
  position: absolute;
  width: 1000px;
  margin: auto;
}

Errors:

1000p is wrong. Should be 1000px.
margin-auto is wrong. Use margin: auto.

Solution to your issue. Try giving this to the CSS to fix:

body {
  margin: 0;
  padding: 0;
}

The reason I ask you to reset the margin is by default, as per CSS 2.1 Specification, the default margin is 8px. I have added padding: 0; because to make sure that other CSS shouldn't affect the padding. Hope it is clear.

edited Sep 11 '15 at 14:36

answered Sep 11 '15 at 12:48

Praveen Kumar Purushothaman

164,888
24
203
252

yes this is my bad, i fast created the message (and use a new keyboard) so I mistipped. Anyway, I can't do that cause the site is responsive and a position absolute with a width will brake it. – Bobby Sep 11 '15 at 13:04
You have the `position` and please remove it! – Praveen Kumar Purushothaman Sep 11 '15 at 13:09
Your post is just a notice about a simple typo, not an answer to the problem, which is passing margin-top to the body for some reason. Unless you have anything to explain, I suggest you comment instead. – Jan Turoň Sep 11 '15 at 13:22
@JanTuroň Sorry, forgot to add the solution. I commented it asking the OP to remove `position: absolute`. Can you kindly check the answer again? – Praveen Kumar Purushothaman Sep 11 '15 at 13:37
Your post would be worth answer if you explained (preferably with reference to manual) WHY the position is problem here. – Jan Turoň Sep 11 '15 at 13:42
For example in case of your solution you could point out that the default margin for body is 8px with reference to [this link](http://www.w3.org/TR/CSS21/sample.html). There is no point adding padding: 0. *it works* is not an answer. Explanation is needed to know the source of the problem. – Jan Turoň Sep 11 '15 at 13:56
1

That looks much better. – Jan Turoň Sep 11 '15 at 14:49

score 2 · Answer 2 · answered Sep 11 '15 at 12:56

2

Your CSS is wrong: 1000p; => correct: 1000px; margin-auto; => margin:auto;

Change your css:

#mydiv{
  position: absolute;
  width: 1000px;
  margin: 0 auto;
  margin-top: XXXXXXX;
}

answered Sep 11 '15 at 12:56

Andrea Pizzirani

53
7

yes this is my bad, i fast created the message (and use a new keyboard) so I mistipped. Anyway, I can't do that cause the site is responsive and a position absolute with a width will brake it. – Bobby Sep 11 '15 at 13:04
2

This is not the OP ask. OP said that body applies the margin of the childers – Marcos Pérez Gude Sep 11 '15 at 13:08

MarginTop applying to the body

2 Answers2