How to position image next to text with padding?

Go To StackoverFlow.com

5

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

2012-04-03 20:59
by bobo2000
> some text - bobo2000 2012-04-03 21:03
Why are you putting the image inside the h2 tag? The header tag is not meant to be used that way. Also you are wanting margin, not padding for your image - rf43 2012-04-03 21:12


3

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;        
}​
2012-04-03 21:08
by laymanje
Yup this is what I was looking for. Thank you - bobo2000 2012-04-03 21:16
This doesn't work, and it's overcomplicated.. - Madara Uchiha 2012-04-03 21:18
What browser are you saying it does not work in - laymanje 2012-04-03 21:21


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.

2012-04-03 21:08
by Madara Uchiha
Thanks truth, that clears it up for me - bobo2000 2012-04-03 21:16
just wanna say box model is what i hate. I use box-sizing: border-box; So it dosen't decide to include padding whenever it feels like and actually listen to width. I learned flexbox model which i love. Box model will increase the width if padding is added unless if it's inside the fixed width parent. And if it's width is 100% padding will push it out. I know it can all be fixed with adjustments but man that make me wanna punch the computer - Muhammad Umer 2013-08-24 22:29