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:
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.
Solution
Add img {vertical-align: bottom;}
to your CSS.
OTHER TIPS
Try removing Height & Width from Table & IMGs
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