How to position image next to text with padding?

Question

<h2><img src="img.jpg" height="75px"> some text</h2>

I would like to position my image right next to a block of text but have it padded down slightly, how can I achieve this? I have tried style: padding 10px; without success inside the image tag.

Answer 1

I think you are looking for something like this. http://jsfiddle.net/3HZr7/

<h2>
    <img src="img.jpg" height="75px"> 
    <span>some text</span>
</h2>



h2{
  overflow: auto;    
}

h2 span{

   float: left;
   margin-top: 10px;
   margin-left: 10px;
}

h2 img{
   float: left;        
}​

Answer 2

You misunderstand the CSS box model.

Padding is for the space inside of the box, margin on the other hand, is responsible for the space outside the box, the space the box has from its container.

So your possible solutions are simple:

1. Apply padding on the parent element.
2. Apply margin on the image element.

Example.