Html 5 Strange Img Always Adds 3Px Margin At Bottom

HTML 5 strange img always adds 3px margin at bottom

This problem is caused by the image behaving like a character of text (and so leaving a space below it where the hanging part of a "y" or "g" would go), and is solved by using the vertical-align CSS property to indicate that no such space is needed. Almost any value of vertical-align will do; I'm fond of middle, personally.

img {
    vertical-align: middle;
}

jsFiddle: http://jsfiddle.net/fRpK6/1/

Three extra pixels at the bottom of the page unaccounted for and not sure how to get rid of them?

Set your img's style to include display: block; or vertical-align: middle;

http://jsfiddle.net/85a6a52t/1/ (See very bottom of CSS panel)

#slideshow img { display: block; }

#slideshow img { vertical-align: middle; }

Reference to this good answer that explains issue

Image inside div has extra space below the image

By default, an image is rendered inline, like a letter so it sits on the same line that a, b, c and d sit on.

There is space below that line for the descenders you find on letters like g, j, p and q.

Demonstration of descenders

You can:

adjust the vertical-align of the image to position it elsewhere (e.g. the middle) or
change the display so it isn't inline.

div {  border: solid black 1px;  margin-bottom: 10px;}
#align-middle img {  vertical-align: middle;}
#align-base img {  vertical-align: bottom;}
#display img {  display: block;}

<div id="default"><h1>Default</h1>  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""></div>
<div id="align-middle"><h1>vertical-align: middle</h1>  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""> </div>    <div id="align-base"><h1>vertical-align: bottom</h1>  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""> </div>
<div id="display"><h1>display: block</h1>  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""></div>

Strange padding between image and a span

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.