CODEWITHSUNDEEP
htmlimagecssheight
scopchanov
scopchanov

Reputation: 8399

Image not taking the whole height of a div - changing the doctype fixes it

Using HTML5 and CSS3 I would like to have an image which uses the full height of its containing div. After removing most of my code I am left with this minimal fragment to represent the problem:

<!DOCTYPE html>
<div style="overflow: hidden; border-radius: 15px; background-color: aqua;"><img style="width: 100%;" src="img/napkin.jpeg"></div>

The fragment produces the following result:

enter image description here

At the very bottom there is a light blue stripe I would like to get rid of (I gave it that color on purpose in order to be visible). Any idea how to achieve that?

EDIT: I've got the idea about the default display of images. However, one thing still bothers me. Commenting out <!DOCTYPE html> fixes the issue. Any idea why?

Upvotes: 2

Views: 52

Answers (1)

Josh McMillan
Josh McMillan

Reputation: 734

Set display: block on your <img /> element. By default img tags are display: inline;, which includes a margin on the bottom.

Upvotes: 4

Related Questions