8

If a <div> or any other element follows an <img>, then a ~3px whitespace appears in between them — even if margins are zero'd.

<img src="example-fractal-art.png">
<div>What is with that gap?<div>

Here's what it looks like with some CSS.

enter image description here

Now it's pretty easy to throw in display: block into the CSS and solve the problem. But why is it there? There are no computed margins, padding, borders, or anything like that.

What are the browsers doing? Someone even called it "magic".

P.S. Alternatively, in some cases, it is possible to solve this by removing whitespace in the HTML code. (But that doesn't work in this case, why?)

Community
  • 1
  • 1
Baumr
  • 6,124
  • 14
  • 37
  • 63
  • 1
    By the way, a `p` is not an inline element; it's a block! – Mr Lister Oct 28 '12 at 17:33
  • Oops! Thanks, took it out. I was originally writing it about `span` (where I noticed this myself), but it was a little complicated so I changed it to a `p` and didn't think :P – Baumr Oct 28 '12 at 17:38

2 Answers2

15

The img is a "replaced element" in HTML, and as such, is it treated as a character. Now in the absence of any styles, the image is aligned with the baseline of the other characters on the line.

So in other words, there is room for the descender underneath the image.

enter image description here

Changing it to a block removes this feature, as you noticed.

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
  • Changing it to a block does a lot more than that. – GolezTrol Oct 28 '12 at 17:30
  • Thanks! I read Golez's reply first and had the same idea and went to try it out, and **you're right: http://jsfiddle.net/Baumr/5z6u9/9/ — it's to suit letters like g, q, y, p, etc.** — very cool! – Baumr Oct 28 '12 at 17:31
  • @Ray, but do you notice how in both Fiddles that there is still a tiny space between the bottom of the letters? Easier to see in your white-background one. Makes sense as well. – Baumr Oct 28 '12 at 17:33
  • 1
    @GolezTrol Sure, but I wasn't implying it didn't. – Mr Lister Oct 28 '12 at 17:33
5

Images by default are aligned with the base line of the text. So if you would put text next to the image, the image would align with the base of an x, but there is a little space (3px apparently) between that base line and the bottom of the line of text.

There you have it:

http://jsfiddle.net/xDCEX/

And you can solve it using vertical-align: bottom if you dont want to make the image a block. That way, the image is still part of the text, but instead of the baseline, it is now aligned to the bottom of the bounding box of the text.

http://jsfiddle.net/xDCEX/1/

Of course, changing it to a display: block also works, but it has other side effect. If everything is working now, changing vertical-align is the easy way.

GolezTrol
  • 114,394
  • 18
  • 182
  • 210
  • Ah, yes, you're right. I see it now. And Mr Lister has the answer — it was staring us in the face. Here's why: http://jsfiddle.net/Baumr/5z6u9/9/ – Baumr Oct 28 '12 at 17:30
  • 3
    +1 for vertical-align: bottom. That explains it best. – Ray Toal Oct 28 '12 at 17:34
  • Thanks, yes, you're right. (Sorry, I drafted that before you edited.) – Baumr Oct 28 '12 at 17:35
  • What is the advantage of keeping images as `inline` elements? (And using `vertical-align: bottom;`.) Thanks! – Baumr Oct 28 '12 at 19:19
  • 1
    The advantage is that it is easily centered without having to specify its width. A block element occupies a whole line, unless you start using float or absolute positioning. I didn't want to imply one solution is better than the other, just pointing out there are two solutions. You should pick the one that suits your needs best. – GolezTrol Oct 28 '12 at 19:24