61,115
社区成员
发帖
与我相关
我的任务
分享关于div包裹img元素高度差3px问题
今天意外的发现html元素div 包裹img元素时，如果div元素没有设置高度，那么div的元素高度竟然会比img莫名其妙多出3个px。
如下图所示：
一开始认为是由于img是inline-block;元素，所有html在编写的时候由于加了回车键和tab键导致html里面有字符，所以占据了一定的字符位置高度，（类似于a标签设置inline-block,实现左浮动效果时要在父元素添加font-size:0效果才可以消去间隙）
然后自己就在父元素里面添加font-size:0;或者设置img display:block;属性[b][/b]，发现还真和父级div元素高度一样，但是如果这样理解是正确的话，我吧html文档里面tab跟回车键都删除了，在写在同一行按理来说这个3px也会消除（特意用a标签设置display:inline-block然后都写在同一行不留回车跟制表符试了一下，貌似还没有间隙），但是结果却不是这样，这3px依然在，
小弟想请教一下大神，这3px产生的原因是什么？是浏览器兼容性问题还是哪里》？
一下是我的html代码
<!DOCTYPE html>
<html>
<head>
<title>html5</title>
<meta charset="utf-8">
<style>
*{padding:0;margin:0;}
</style>
<body>
<div class="box"><img src="a.jpg" style="height:200px;"></div>
</body>
</html>
如下图所示：
一开始认为是由于img是inline-block;元素，所有html在编写的时候由于加了回车键和tab键导致html里面有字符，所以占据了一定的字符位置高度，（类似于a标签设置inline-block,实现左浮动效果时要在父元素添加font-size:0效果才可以消去间隙）
然后自己就在父元素里面添加font-size:0;或者设置img display:block;属性[b][/b]，发现还真和父级div元素高度一样，但是如果这样理解是正确的话，我吧html文档里面tab跟回车键都删除了，在写在同一行按理来说这个3px也会消除（特意用a标签设置display:inline-block然后都写在同一行不留回车跟制表符试了一下，貌似还没有间隙），但是结果却不是这样，这3px依然在，
小弟想请教一下大神，这3px产生的原因是什么？是浏览器兼容性问题还是哪里》？
一下是我的html代码
<!DOCTYPE html>
<html>
<head>
<title>html5</title>
<meta charset="utf-8">
<style>
*{padding:0;margin:0;}
</style>
<body>
<div class="box"><img src="a.jpg" style="height:200px;"></div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
Rella2019 2019-09-23
- 打赏
- 举报
因为图片的垂直对齐方式默认值是baseline(基线对齐)，图片高度就会多出3px.
daswcszxw 2017-03-03
- 打赏
- 举报
img{vertical-align:top; font-size:0;}
#麻辣小龙虾# 2017-03-03
- 打赏
- 举报
自己顶一下哈
#麻辣小龙虾# 2017-03-03
- 打赏
- 举报
img{vertical-align:top; font-size:0;}
[/quote]
很多时候，大家会根据自己的项目设定。
https://github.com/mblode/marx/blob/master/scss/_base.scss[/quote]
谢谢大神指点迷津
daswcszxw 2017-03-03
- 打赏
- 举报
img{vertical-align:top; font-size:0;}
daswcszxw 2017-03-03
- 打赏
- 举报
img{vertical-align:top; font-size:0;}
上面说了，解决到知道怎么解决。主要是我想知道这3px是怎么来的?是浏览器自身问题吗？[/quote]
是的。
#麻辣小龙虾# 2017-03-03
- 打赏
- 举报
img{vertical-align:top; font-size:0;}
IMyxuan 2017-03-01
- 打赏
- 举报
已经设置了，去掉img 的border也没用啊。[/quote]
有链接吗，直接发链接看看吧
#麻辣小龙虾# 2017-03-01
- 打赏
- 举报
已经设置了，去掉img 的border也没用啊。
#麻辣小龙虾# 2017-03-01
- 打赏
- 举报
IMyxuan 2017-03-01
- 打赏
- 举报
*{
padding:0;
margin:0
}
zhang1lang4 2017-03-01
- 打赏
- 举报
border-width:0;或border-style:none;
去掉图像的边框
通过在 <img> 标签中使用 border="0" 属性，就可以把图像超链接周围的边框去掉。对于某些图像，尤其是那些图像映射来说，没有边框可能会使页面的外观得到改善。而对于那些清楚地表示是指向其他图像的链接按钮，如果没有边框，图像看上去可能会更好。
虽然去掉边框不会降低文档的可用性，但还是要多加小心。因为没有边框就意味着去掉了一种非常常见的超链接视觉指示效果，这使得读者可能不会像原来那么很容易就可以找到这些链接。浏览器通常会在鼠标移动到超链接图像上的时候改变鼠标指针的形状，但是不能指望浏览器一定会这样做，更不应该让用户在没有边框的图像上摸索，已找到那些隐藏的链接。
我们强烈推荐你在使用无边框图像时，最好同时使用其他方法，以便你的读者知道应该在这些图像上单击。即使使用简单的文字，也很难使文档对于读者来说具有更好的可访问性。
#麻辣小龙虾# 2017-03-01
- 打赏
- 举报
已经设置了，去掉img 的border也没用啊。[/quote]
有链接吗，直接发链接看看吧[/quote]
没有连接，
<!DOCTYPE html>
<html>
<head>
<title>html5</title>
<meta charset="utf-8">
<style>
*{padding:0;margin:0;}
</style>
<body>
<div class="box"><img src="a.jpg" style="height:200px;"></div>
</body>
</html>
新建一个换张图片然后看下就可以
