HTML 5 奇怪的 img 总是在底部添加 3px 边距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10844205/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML 5 strange img always adds 3px margin at bottom
提问by shiva8
When I change my website to
当我将我的网站更改为
<!DOCTYPE HTML>
Every img element that is wrapped inside a DIV has a 3px bottom margin to it even though that margin is not defined in CSS. In other words, there are no style attributes that are causing that 3px bottom margin.
包装在 DIV 中的每个 img 元素都有一个 3px 的底部边距，即使该边距未在 CSS 中定义。换句话说，没有导致 3px 底部边距的样式属性。
<div class="placeholder">
<img alt="" src="/haha.jpg" />
</div>
Now let's say haha.jpg is 50x50, and .placeholder is set to display: table. Strangely the height dimensions of .placeholder in my observation is 50x53...
现在假设 haha.jpg 是 50x50，并且 .placeholder 设置为 display: table。奇怪的是，我观察到的 .placeholder 的高度尺寸是 50x53 ...
Has anyone encountered this anomaly before and fixed it?
有没有人遇到过这个异常并修复它？
EDIT
编辑
Here is the JS FIDDLE
这是JS FIDDLE
回答by Brilliand
This problem is caused by the image behaving like a character of text (and so leaving a space below it where the hanging part of a "y" or "g" would go), and is solved by using the vertical-alignCSS property to indicate that no such space is needed. Almost any value of vertical-alignwill do; I'm fond of middle, personally.
这个问题是由图像表现得像一个文本字符引起的（因此在它下面留了一个空格，“y”或“g”的悬挂部分会出现），并通过使用vertical-alignCSS 属性来解决需要这样的空间。几乎任何值的vertical-alignwill do；我middle个人很喜欢。
img {
vertical-align: middle;
}
jsFiddle: http://jsfiddle.net/fRpK6/1/
jsFiddle：http: //jsfiddle.net/fRpK6/1/
回答by SpliFF
I often solve this by giving the image element display:blockor display:inline-blockas appropriate.
我经常通过提供图像元素display:block或display:inline-block酌情解决这个问题。
回答by oytunyuksel
it is solved my problem.
它解决了我的问题。
line-height: 0;
回答by dkeeling
I believe setting
我相信设置
line-height: 1;
on the image will also fix this problem, especially if it's in a block by itself.
在图像上也将解决这个问题，特别是如果它本身在一个块中。
回答by Sebachenko
apply display: blockto the image fix it, i have this issue with images inside floated divs.
应用于display: block图像修复它，我在浮动 div 中的图像有这个问题。
回答by arlendp
maybe it is the problem of the white-space that causes this. so, the methods bellow maybe useful
也许是空白的问题导致了这一点。所以，下面的方法可能有用
img {
display: block;
} or
} 或者
img {
vertical-align: top/middle/...;
}
}
or
或者
.placeholder {
font-size: 0;
}
}
回答by leymannx
For me it was a combination of
对我来说这是一个组合
font-size: 0px;
line-height: 0;
on the wrapping container that fixed it.
在固定它的包装容器上。
回答by pantryfight
I'm not sure of the exact explanation of why it happens, but give your placeholder div font-size: 0px;
我不确定为什么会发生这种情况的确切解释，但是给你的占位符 div font-size: 0px;
.placeholder {
font-size: 0px;
}
回答by CSS Guy
not sure what's the exact problem but i have try this with 2 different option first apply class on img tag this will work and second apply font size 0 px;
不知道确切的问题是什么，但我尝试了 2 个不同的选项，首先在 img 标签上应用类，这将起作用，然后应用字体大小 0 像素；
回答by Naderio
In my special case none of the above solutions worked.
在我的特殊情况下，上述解决方案均无效。
I had a wrapping divwith display: flex;.
我有一个包裹div带display: flex;。
I managed to make this working by adding: align-items: flex-start;to the wrapping div AND to all the images: display: block;.
我设法通过align-items: flex-start;在包装 div 和所有图像中添加：display: block;.
Before I explicitly told the content to align it messed up the Layout. After setting it to flex-start everything works like a charm.
在我明确告诉内容对齐之前，它弄乱了布局。将其设置为 flex-start 后，一切都像魅力一样。
