CSS <h> Margin help?

I have a margin used to space some headings down away from an image, but despite this method working on other pages, it does not in this instance. I know there are plenty of alternative solutions, but am curious as to what is wrong with this one. Can anyone help?

<div class="column" style="width: 237px">
<img src="img.jpg" alt="" title="img" width="237" height="300" class="alignnone size-full wp-image-84" />

<h1 style="margin-top: 40px">VAL</h1>
<span class="detailhead">Heading 1</span> <span class="detail">Detail 1</span><br />
<span class="detailhead">Heading 2</span> <span class="detail">Detail 2</span>
</div>

These are all the additional class declarations: The image class has no associated style (class was inserted by Wordpress).

h1 {
    font-size: 17px;
}

span.detailhead{
    font-size: 13px;
    color:#000000;
}


span.detail {
    position: relative; 
    top: 1.5px;
    font-size: 14px;
    color:#000000; 
}

.column {
    display: block;
    float: left;
}

Here is the offending style i overlooked:

img {
    display: block;
    float:left;
    margin-right:10px;
    margin-bottom:10px;
    border-style: solid;
    border-width: 1px;
    border-color: #ffffff;
    z-index: 2;
}

A more specific selector fixed the issue. Thanks to all for helping me with this seriously schoolboy error!

Could you try adding a style="display:block" to the img tag?

If your using chrome or safari for testing: use the element inspector to check wether your inline setting is not overruled by an !important; declaration in one of the classes.

Edit: To quickly test this you can also add " !important;" to your inline css.