<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.
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;
}
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:
padding
on the parent element.margin
on the image element.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