在写代码的时候经常遇到这样一个问题，如果div里嵌套一个img元素且div的高度是由img的高度来撑开，那么div的高度总会比img的高度多那么几个像素。

我在W3C中做了一下试验，首先还原一下问题。代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset=utf-8 />

<title>图片底部默认有空白</title>

</head>

<style type="text/css">

*{

margin: 0;

padding: 0;

}

.box{

width:200px;

margin-left: auto;

margin-right: auto;

margin-top: 30px;

border:1px solid red;

font-size:50px;

display:inline

}

</style>

<body>

<div class="box">

你xpagx好<img src="http://tp1.sinaimg.cn/1397442732/180/40020876841/0" alt="" />

</div>

</body>

</html>

关于div中放入一个img元素导致图片底部出现空隙引发的思考

图片与底部有一定的空隙

我查了一下，这个原因是因为DIV元素vertical-align默认值是baseline,从图片可以看出，DIV元素默认的baseline的位置为英文字母X，所以图片的底端与DIV的底部并没有对齐。

如果想要让图片和底部对齐也很简单，可以有多种方法：可以设置图片元素的display:block,或者设置vertical-align为bottom。当然还有其他的属性设置方法，大家可以自己尝试。设置完后效果就变成了我们想要的这样

关于div中放入一个img元素导致图片底部出现空隙引发的思考

图片与底部已经没有空隙了

在这里，小编只是想和大家分享一下自己在工作过程中碰到的一些小问题，如有不对的地方欢迎指正和交流讨论。

查看原文 >>
相关文章