image (img) element is not taking margin-top or bottom..

While designing one of my page I encountered with an interesting issue with which I juggled a lot.I was trying to align the image element as per design but the image element was not taking any margin at all in top or bottom but in horizontal direction only.

So as per specification I have discovered the basic behind the inline and block element.The image element is inline by default. All the inline elements take margin only in horizontal direction but that would not be reflected in vertical direction. This elements will continue the flow without breaking the flow.

Hence in below example:-

<style>
.custom-span{
margin:20px;
border:2px #000 solid;
background-color:#d5cbcb;
}
</style>

The span element in this line will be separated horizontally on 
defining the margin but the vertical alignment of the span will be same. <span class="custom-span">span element</span>

More about the inline and block properties,click here