Question

为什么我的本地计算机上的图像左侧会显示空白区域，而jsFiddle中没有？

我在小提琴中运行相同的代码，但小提琴工作正常，而在我的本地机器上，图像左侧有一些空间。注意左边比右边宽。

我该如何解决这个问题？我在本地机器上使用相同的图像以及我的小提琴。

<!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 for me

enter image description here

本地计算机

enter image description here

Answer 1

::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>

白色空间出现在本地计算机上的图像之前，但不出现在jsFiddle中

1 个答案: