0

Notice that the bottom of the image does not reach the red outline below it, which is the bottom of the containing div.

What's going on here? This is counter-intuitive or not obvious to me anyway.

I'm not looking for a kludge to fix it. This is a made up example. I'm trying to master my understanding of css.

* {
  margin: 0px;
  padding: 0px;
}
.frame {
  outline: 1px solid red;
  padding: 0px;
}
.frame img {
  /*border: 10px solid yellow;
  outline: 10px solid blue;*/
}
<div class="frame">
  <img src="http://lorempixel.com/200/300/city/200x300/" />
</div>
toddmo
  • 20,682
  • 14
  • 97
  • 107

2 Answers2

2

Images are inline elements and are, thus, treated like text. They sit on the baseline just as text does so there is a slight padding underneath them. That gap is there to allow for descenders of text.

To remove the gap, add vertical-align:bottom to the CSS for the image.

Rob
  • 14,746
  • 28
  • 47
  • 65
  • Wow! Now THAT is what I call counter-intuitive! Thanks bro! – toddmo Oct 31 '15 at 19:19
  • Up voted for good explanation. So, let me ask you a follow-up question, if I may. Why would I ever want to treat an image like text? If there's a url of a page that uses it that way, or what web developers call that technique, if that makes any sense? – toddmo Oct 31 '15 at 19:24
  • @toddmo You should think of it as being set as an inline element, not text, though I worded it that way cause text is inline, too. Technically not correct cause text is contained inside a line box but now I'll be getting too wordy and broad. For an explanation, you should read the spec itself: http://www.w3.org/TR/CSS21/visuren.html#inline-boxes and http://www.w3.org/TR/CSS21/visuren.html#inline-formatting – Rob Oct 31 '15 at 19:28
2

In order to get rid of this, just add this style to your <img>:

    display: block

This will force the image display not to be inline and so that things like line-height won't apply to it.

Tiago Romero Garcia
  • 1,068
  • 9
  • 11