白色空間出現在本地機器上的圖像之前，但不出現在jsFddle

爲什麼在本地機器上我的圖像左側顯示空白區域，而不是在jsFiddle？白色空間出現在本地機器上的圖像之前，但不出現在jsFddle

我在小提琴裏運行着相同的代碼，但小提琴工作正常，而在我的本地機器上，圖像左側有一點空間。注意左邊比右邊寬。

我該如何解決這個問題？我在本地機器上以及我的小提琴上使用了相同的圖像。

<!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我

enter image description here

本地機器

enter image description here

來源

2014-07-19 Norman

https://i.imgur.com/ldyqNz0.png – Ryan

我看到了你的小提琴的差距。 –

查看我更新的問題，以及我在小提琴和本地機器中看到的內容。 – Norman

的::before僞元素的作用類似於在許多方面是一個真正的元素，並重新specting空白的規則就是其中之一：

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

來源

2014-07-19 16:46:42 Ryan

我不敢相信這件事是由img在一條新線上造成的？這是問題嗎？ – Norman

@Norman：有縮進，是的。空白符存在，但直到在元素之間或者應用某種「空白」規則纔有意義。 – Ryan

白色空間出現在本地機器上的圖像之前，但不出現在jsFddle

回答

相關問題