Margin-top not working

Question

When I use the margin-left it works. But the margin-top does not work. Anyone know why the on does work and the other doesn't?

Html code

<div id="footer"> <!-- BEGIN FOOTER -->
<p class="copyright"> Copyright © </p>
</div> <!-- END FOOTER -->

Css

#footer {

background-image: url(../website/images/footer.png);
width: 1200px;
height: 100px;

}

p.copyright {

margin-top: 10px;
margin-left: 120px;

}

What is above your footer? something that has been floated? positioned? Possible that the floats havent been cleared? — Moin Zaman, Jul 28 '12 at 13:00
Here it works fine: http://jsfiddle.net/qyUMC/. Can you give more code — Idrizi.A, Jul 28 '12 at 13:00
your p tag default having margins, instead use margin-top:20 or something else for the top may be it will work — Jack, Jul 28 '12 at 13:13
@Enve's Example works, actually his own markup works perfectly, unless and untill he means that even the parent div is shifted below — Mr. Alien, Jul 28 '12 at 13:15
@Mr.Alien It's a fair bet that he wants the margin to apply inside the div. Otherwise he wouldn't have asked the question. — JJJ, Jul 28 '12 at 13:22

score 2 · Answer 1 · edited Jul 28 '12 at 13:40

2

It's called margin collapse. It happens when one block element is the child of another block element. here are a couple of methods to tackle the problem.

1- Add a border to the element

2- Add 1px of padding

3- change the position property. Margins of absolutely and relatively positioned boxes don’t collapse.

I've recently written a blog post about that to learn more refer here

edited Jul 28 '12 at 13:40

Mr. Alien

153,751
34
298
278

answered Jul 28 '12 at 13:22

Faraz Kelhini

3,925
32
38

More info about margin collapse https://www.sitepoint.com/collapsing-margins/ – Adriano Resende Sep 09 '17 at 00:32

score 0 · Answer 2 · edited Jul 28 '12 at 13:40

0

try out this

#footer {
    background-image: url(../website/images/footer.png);
    width: 1200px;
    height: 100px;
    position:absolute;
}

p.copyright {
    background-color:red;
    margin-top: 10px;
    margin-left: 120px;
}

edited Jul 28 '12 at 13:40

Mr. Alien

153,751
34
298
278

answered Jul 28 '12 at 13:20

Uttara

2,496
3
24
35

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

0

Try this:-

  #footer {
    background-image: url(../website/images/footer.png);
    width: 1200px;
    height: 100px;
    overflow:hidden; // add overflow
  }
    
  p.copyright {
    margin-top: 10px;
    margin-left: 120px;
  }

edited Jun 20 '20 at 09:12

Community

1
1

answered Sep 05 '13 at 07:34

SaurabhLP

3,619
9
40
70

Margin-top not working

3 Answers3

Try this:-