html中图片下面有空白（3px左右）原因及解决方案
我们在页面中写样式的时候有时候会遇到这样的情况：
http://www.pslove.cn/wp-content/uploads/2016/08/粘贴图片1.png
原因：img是一种类似text的元素，在结束的时候，会在末尾加上一个空白符，所以就会多出3px。
解决方案：img{ display:block;}
http://www.pslove.cn/wp-content/uploads/2016/08/image1.png
或者img{ vertical-align: top;}
注：vertical-align: top;把元素的顶端与行中最高元素的顶端对齐；
http://www.pslove.cn/wp-content/uploads/2016/08/粘贴图片3.png
本帖最后由 l95914 于 2016-11-22 17:54 编辑
我爱佳丽 发表于 2016-11-22 17:03
楼主图片宽高比例和 图片父级的宽高 比例不一样 怎么能做到 图片宽高与其父级的宽高一样大小而且图片不 ...
图片宽高都设置100%；
举例如下，代码可复制运行：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin:0;
padding: 0;
}
.photo {
width: 1200px;
height: 700px;
margin:0 auto;
}
img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="photo">
<img src="http://image60.360doc.com/DownloadImg/2013/04/1613/31674132_21.jpg" alt="">
</div>
</body>
</html>
本帖最后由 我爱佳丽 于 2016-11-23 13:39 编辑
l95914 发表于 2016-11-23 13:11
如果图片本身高度没有盒子高，你设置它有什么意义？？以你的设定来看，我无言。
就是盒子和图片的比例、大小相差很大时然后使图片填满盒子并且图片不能被拉伸 和变形 纯CSS有没有解决办法
类似这种 图片尺寸很大（很长的图 也可能是很宽的图）或者尺寸很小（图片填满盒子 居中显示不变形） 保证图片不变形的情况下居中显示 这种纯CSS能解决吗 （这个我是用JS 控制的）
虽然用不到不过还是感谢楼主分享的 谢谢楼主分享前端一些小的细节 谢谢分享吧，楼主精神值得鼓励。
以后建议写页面时候每个头部css直接注明
*{
padding：0；
margin：0；
border：0；
}
a {
text-decoration:none；
}
img{
display：block；
}
chearfix{
chear:both;
} 十分赞成！！！ 来学习的, 这就看楼主用的哪个重置CSS文件了，我用的是自己写的，就已经对image初始化了，并不会出现那种问题，但还是感谢你的精神 学习一下 感谢楼主分享