为什么< img>之间有一个讨厌的小空间。和其他元素？ [英] Why is there a pesky little space between <img> and other elements?

问题描述

如果< div> 或任何其他元素在< img> 之后，即使 marginins 为零。

 < img src =example-fractal-art.png> 
< div>这个差距是什么？< div> 
  

这是它的外观。但为什么会有呢？

什么是浏览器？有人甚至称它为魔法。

PS或者，在某些情况下，可以通过删除HTML代码中的空格来解决此问题。 （但是，在这种情况下，无法使用，为什么？） / p>

解决方案

img 是HTML中的替换元素例如，它被视为一个字符。现在在没有任何样式的情况下，图像与线上其他字符的基线对齐。

因此，换句话说，下面有下降器

将其更改为块会删除此功能，因为您注意到了。

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.

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

解决方案

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.

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

这篇关于为什么< img>之间有一个讨厌的小空间。和其他元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！