Why do images create a gap?

I would like to ask why there is a gap around the images. Is there something about this behavior in the spec?

Simple code where you can see the gap between the images:

<style>img {width: 100px; height: 100px; background: red;}</style>    

<img><br>
<img><br>
<img>

      

http://jsfiddle.net/sfptspj0/

I know there are more options on how to remove this space:

  • display: block;
  • float
  • vertical alignment

But I want to know why the gap exists, not how to remove it.

Any ideas? Thank.

0


source to share


1 answer


If the image is displayed in a row, it leaves a little space below it. This is because the image is placed on top of the original text of the text and there must be more room below the baseline for the trigger characters such as g, j or q.



Source: http://www.schoonzie.com/rogue-padding-below-images

+7


source







All Articles