这是我的HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<div style="border:1px solid red; float:left; padding:0;">
<img src="xxx.jpg">
</div>
我不知道为什么div包含一些填充底部甚至我设置填充:0.
如果我删除DOCTYPE,则不会发生此问题.有没有其他方法可以在不删除DOCTYPE的情况下解决此问题？
med*_*iev 36
img { display:block; }
要么
img { vertical-align:bottom; }
会工作.由于图像是内联的,文本是内联的,因此用户代理会为下行字符(y,q,g)留出一些空间.要为图像取消此效果,您可以指定上述任一样式,但您可能希望使规则更具体,因此您不会定位不希望应用此图像的图像.
另一个海报指出的另一个选择是在父元素上将line-height设置为0.
技术说明:https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps
Abi*_*adi 10
设置行高:0; 在div风格:
<div style="border:1px solid red; float:left; padding:0; line-height:0;">
<img src="xxx.jpg" />
</div>
img是一个内联元素,因此它为下载字符节省了空间.调整div中的行高消除了这个问题.或者,您也可以更改img以显示为块元素.