CSS填充问题，填充不起作用

Question

Im trying to use padding to push an image 18px from the top of a div. Neither margin or padding are working, and after comparing the two padding seems to be what I want anyway.

The problem is with the footer-middle-left-left-image div tag. The margin on the text one works fine though.

---

Here's the html:

<div id = "footer-middle-left-left">
     <div id = "footer-middle-left-left-picture">
          <img src = "" alt = "some_text">
     </div>
     <div id = "footer-middle-left-left-text">
          If you would like to join our newsletter, please enter your </br>
          email address below.
     </div>
     <div id = "footer-middle-left-left-email">
     </div>
</div>

The CSS I have is:

#footer-middle-left-left {
    float: left;
    width: 483px;
    height: 175px;
}

#footer-middle-left-left-image {
    float: left;
    width: 483px;
    height: 59px;
    padding-top: 18px;
}

#footer-middle-left-left-text {
    width: 483px;
    height: 58px;
    float: left;
    margin-left: 25px;
    color: white;
}

#footer-middle-left-left-email {
    height: 58px;
    float: left;
    width: 483px;
}

---

Any help would be appreciated! Also any advice, anything at all would be nice too. I'm pretty new so advice not relevant to my problem is also appreciated, like is this a good id-naming convention, etc..

Answer 1

In html you have footer-middle-left-left-picture but in css #footer-middle-left-left-image Is it this bug or you just make mistake on paste code?

http://jsfiddle.net/CmwHu/

Answer 2

#footer-middle-left-left-image this id doesnt exist in your html.

So i have changed footer-middle-left-left-picture to #footer-middle-left-left-image . It is working now

DEMO