Home/ Questions/Q 8740001
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T11:03:12+00:00

If a <div> or any other element follows an <img> , then a ~3px

  • 0

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?)

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0