为什么在我的本地计算机上我的图像左侧会出现空白，而 jsFiddle 中却没有？ ？
我正在运行 fiddle 中的相同代码，但 fiddle 工作正常，而在我的本地机器上图像左侧有一点空间。请注意左侧比右侧宽。
我该如何解决这个问题？我在我的本地机器和我的 fiddle 上使用相同的图像。
<!DOCTYPE html>
<html>
<head>
<title>The annoying image</title>
<style>
.outer {
border:1px solid #ddd;
float:left;
height:150px;
padding:10px;
}
.outer img {
vertical-align: middle;
}
.outer:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="outer">
<img src="/imgur/us/thumb_2.jpg">
</div>
</body>
</html>
适合我的 JSFiddle
本地机器
最佳答案
::before 伪元素在很多方面都像真正的元素，遵守空白规则就是其中之一:
<div class="outer">
::before
<img src="/imgur/us/thumb_2.jpg">
</div>
::before 被插入到元素的最前面(> 和 : 之间的空格只是为了展示) ，并且由于换行符和缩进，它和您的图像之间有空白。
如果删除它，there will be no gap .
<div class="outer"><img src="/imgur/us/thumb_2.jpg">
</div>
关于html - 空白出现在本地机器上的图像之前，但不出现在 jsFiddle 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24842625/