为什么这个容器div比包装它包含的图像所需的高？ [英] why is this container div taller than required to wrap the image it contains?
本文介绍了为什么这个容器div比包装它包含的图像所需的高？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想知道为什么在图片底部边框和下面包含div之间有垂直间距：
I am wondering why there is vertical space between the bottom borders of the image and containing div in the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><html xmlns:fb="http://www.facebook.com/2008/fbml"><!--facebook-->
<head><meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>test</title>
<style>
.box {
border:1px solid black;
}
.image {
border:1px solid red;
}
</style>
</head>
<body>
<div class="box">
<img class="image" src="http://i.imgur.com/o2udo.jpg" />
</div>
</body>
</html>
推荐答案
默认情况下，图像是换行元素。
Images are, by default, inline-replaced elements. This means they are treated like characters.
某些字符（例如 p 和 q ）有下降。一些（如 a 和 d ）不。图片类似于后者。
Some characters (such as p and q) have descenders. Some (such as a and d) do not. Images are akin to the latter.
下拉菜单下面需要有空格。
There needs to be space below the line for the descender to descend into. That is the gap you are seeing.
您可以制作图片 display：block 或调整其 vertical-align 属性来更改此属性。
You can make an image display: block or adjust its vertical-align property to change this.
这篇关于为什么这个容器div比包装它包含的图像所需的高？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
