2

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?

scopchanov
  • 7,966
  • 10
  • 40
  • 68
  • did you tried `height: 100%` along with `width: 100%`? – Saeed Jassani Apr 13 '18 at 02:01
  • @SaeedJassani, Yes, I did. I've tried also with `height: auto;` It's not working. :( – scopchanov Apr 13 '18 at 02:02
  • 2
    Try `display: block`. It is probably because the image is inline and has some extra spacing from `line-height` not being 1. – Jonathan Lam Apr 13 '18 at 02:02
  • Possible duplicate of [Image inside div has extra space below the image](https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image) – Jonathan Lam Apr 13 '18 at 02:04
  • @JonathanLam, What do you know... It worked. You should add this as an answer. Thank you very much for the help! – scopchanov Apr 13 '18 at 02:05
  • 1
    @scopchanov Glad to hear it! I would have if JoshMcMillan hadn't beat me to posting it as an answer =) – Jonathan Lam Apr 13 '18 at 02:07
  • @JonathanLam, Usually I try to do my research, but this is one I did missed. – scopchanov Apr 13 '18 at 02:08
  • 1
    @JonathanLam, I still apreciate it. Besides, I find this solution more suitable than the accepted answer of the quoted question. – scopchanov Apr 13 '18 at 02:09
  • @JonathanLam, I've made an addition to my question. The issue is fixed, however I always try to go to the bottom of the things and if you could explain that I would be very grateful. – scopchanov Apr 13 '18 at 02:18
  • @scopchanov The addition is interesting. [Here](https://stackoverflow.com/questions/6405009/mysterious-padding-margin-appears-after-image-in-strict-mode) is another question that references the doctype issue (although none of the answers address it). Doctype is used to state what the browser is expecting; perhaps there are some additional styles in the HTML5 doctype that cause it? I'm not sure. – Jonathan Lam Apr 13 '18 at 02:29
  • @JonathanLam, "Default styles in _HTML5_" definitely makes sense as a cause for the problem / fix. Please, add this comment as an answer. – scopchanov Apr 13 '18 at 02:37

1 Answers1

4

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

Josh McMillan
  • 724
  • 3
  • 8