html – 为什么我的图像和包含框之间有差距?

当我的浏览器呈现以下测试用例时,图像下方有一个间隙.根据我对CSS的理解,蓝色框的底部应该触摸红色框的底部.但事实并非如此.为什么?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title>foo</title></head>
<body>

 <div style="border: solid blue 2px; padding: 0px;">

  <img alt='' style="border: solid red 2px; margin: 0px;"
   src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png" />

 </div>

</body>
</html>

解决方法

内联元素垂直对齐基线,而不是包含框的最底部.这是因为文本下方需要少量空间用于下行 – 字母上的尾部如小写’p’.因此,在底部上方有一条短距离的虚线,称为基线,默认情况下内联元素与其垂直对齐.

有两种方法可以解决这个问题.您可以指定图像应垂直对齐到底部,也可以将其设置为块元素,在这种情况下,它不再被视为文本的一部分.

除此之外,Internet Explorer还有一个HTML解析错误,它不会忽略关闭元素后的尾随空格,因此如果您遇到Internet Explorer兼容性问题,可能需要删除此空格.

相关文章

操作步骤 1、进入elasticsearch的plugin,进入ik。进入config。 2、在config下面建立以.dic为后缀的字典...
lengend data数据中若存在&#39;&#39;,则表示换行,用&#39;&#39;切割。
代码实现 option = { backgroundColor: &amp;#39;#080b30&amp;#39;, tooltip: { trigger: &...
问题原因 原因在于直接在js中取的变量并复制给var变量。 于是就变成这样。 解决办法 var data = &#...
前言 最近做了一个调查问卷导出的功能,需求是将维护的题目,答案,导出成word,参考了几种方案之后,选...
对于很多人来说,用字符编码都是熟能生巧,而不清楚为什么是那样的字符编码,所以我在这列了一个表,翻...