html – div中的意外填充边距

概述我在div中设置图像,同时将所有边距和填充设置为0.我仍然在div内部的图像下方留下一点间隙.为什么div比图像大？ 看到这个jsfiddle：http://jsfiddle.net/n6bz4tye/ 在FF32和Chrome 37中效果相同. 我知道,我可以使用负边距/填充来解决这个问题,但我想知道,发生了什么以及它为什么会这样. 默认情况下,图像是一个内联元素,就像一个字母,在字母下面有一个 我在div中设置图像,同时将所有边距和填充设置为0.我仍然在div内部的图像下方留下一点间隙.为什么div比图像大？

看到这个Jsfiddle：http://jsfiddle.net/n6bz4tye/

在FF32和Chrome 37中效果相同.

我知道,我可以使用负边距/填充来解决这个问题,但我想知道,发生了什么以及它为什么会这样.

解决方法 默认情况下,图像是一个内联元素,就像一个字母,在字母下面有一个空格,你在字母上找到的下行符,内联元素的默认垂直对齐方式(在你的情况下是图像)是基线,你可以调整垂直对齐图像以将其定位在其他位置.

你可以通过set vertical-align：mIDdle删除下面的空格;到.images img

Jsfiddle – DEMO

.images img {  wIDth: 100px;  margin: 0px;  padding: 0px;  vertical-align: mIDdle;}

您还可以通过将vertical-align设置为img来全局重置此行为

img {    vertical-align: mIDdle;}

总结

以上是内存溢出为你收集整理的html – div中的意外填充/边距全部内容，希望文章能够帮你解决html – div中的意外填充/边距所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。