Weird HTML5 sliced images margin top & bottom issue

Question

Comparing HTML4 with HTML5, I encounter a strange problem when placing sliced images to my website.

See the example pages below:

• HTML4 version
• HTML5 version

As you can see in HTML5 version, an unwanted margin appears in image margin top & bottom, and cannot be removed via CSS overrides. How to make HTML5 version look identical to HTML4 version (in this simple case)?

p.s. the only difference of the 2 files is the header DOCTYPE declaration.

Answer 1

Add img {vertical-align: bottom;} to your CSS.

Answer 2

Try removing Height & Width from Table & IMGs

Answer 3

Add img { display: block; } to your css. HTML5 will cause browsers to render inline stuff slightly differently to HTML4.

For more information, see this informative article from Mozilla: https://developer.mozilla.org/en/Images%2C_Tables%2C_and_Mysterious_Gaps