CODEWITHSUNDEEP
htmlcss
bobo2000
bobo2000

Reputation: 1877

How to position image next to text with padding?

<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.

Upvotes: 5

Views: 24722

Answers (2)

laymanje
laymanje

Reputation: 833

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;        
}​

Upvotes: 3

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 174957

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.

Upvotes: 2

Related Questions