robert robert - 4 months ago 14
HTML Question

HTML5 : <!DOCTYPE html> changes page style

When I use HTML5

<!DOCTYPE html>
this code the
<div>
with id previous have a 5.5 pixels in height more than the width (5.5 pixels in my screen it will change depending on window size but will always be different).

And when I remove when I remove
<!DOCTYPE html>
it has the same width.



<!DOCTYPE html>
<html>
<body>
<div id="previous" style="background-color: gray;width: 5%;border-radius: 100%;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Circle_arrow_left_font_awesome.svg/240px-Circle_arrow_left_font_awesome.svg.png" alt="previous" style="width: 100%;">
</div>
</body>
</html>





Tried reset browsers style (setting
margin
and
padding
, ... to 0) and tried setting
width
and
height
of
<html>
and
<body>
to 100% didn't help.

ray ray
Answer

Add display: block to your image's style. By default images are displayed inline, which means space below for descenders.

Comments