Strange padding between image and a span - html

Question

I have a strange padding between image and a span, I can not get rid of.
<div>
<img src="http://placehold.it/100x100" />
<span>hello</span>
</div>
img{
padding:20px;
background: red;
}
span{
width: 300px;
background-color: blue;
display: inline-block;
vertical-align: top;
height: 100%;
}
As you see in this fiddle, I have some space between red and blue elements. And no matter what I do, I can not get rid of it. Also I would be grateful is someone can tell me why my height: 100%; does not work for the second element (it should be the same height as image).

Answer 1

There is a strange padding because there is a space between the <img> and <span> in the html source.
<div>
<img src="http://placehold.it/100x100" />
<span>hello</span>
</div>
Removing the space would eliminate the padding.
<div>
<img src="http://placehold.it/100x100" /><span>hello</span>
</div>
But that's probably not what you are after (read on). As per your second question, the reason 100% doesn't work is because the <div> isn't given a height and there is nothing to base the percentage height on. The <div> height here is the result of the height of its contents. It takes the height of the taller element so that it can accommodate both.
So what you are actually looking for is display: table. Placing the image and text side by side is very easily achieved with tables.
div {
display: table;
}
img {
display: table-cell;
padding:20px;
background: red;
}
span {
display: table-cell;
width: 300px;
background-color: blue;
vertical-align: top;
height: 100%;
}
See demo here.

Answer 2

Inline elements are sensitive to white space. Simply remove it:
<div>
<img src="http://placehold.it/100x100" /><span>hello</span>
</div>
jsFiddle example
Or
<div>
<img src="http://placehold.it/100x100" /><!--
--><span>hello</span>
</div>
jsFiddle example
Another technique is to make the font size on the container element zero, and then reset the size on the children, but I don't recommend that.

Answer 3

because your html elements that were styled with display:inline-block were not physically touching....i fixed it: http://jsfiddle.net/jalbertbowdenii/2ZNUT/1/

Answer 4

add display:block in your image's css.
try it in fiddle
img{
padding:20px;
background: red;
display:block;
}
span{
width: 300px;
background-color: blue;
display: inline-block;
vertical-align: top;
height: 100%;
}

Answer 5

Apply display property or float property for your img. So the css will look like:
img{
padding:20px;
background: red;
display:block;
}
Or
img{
padding:20px;
background: red;
float:left;
}

Answer 6

The reason you get the spaces is because, you have spaces between the elements. Simply remove the space.