空間標籤之間<img>

Question

如果我使用這個代碼（與所述兩個標記之間的空間）：

<img src="....." style="border:0px;margin:0px" /> 
<img src="....." style="border:0px;margin:0px" /> 

有圖像之間的4個像素。如果我使用這個：

<img src="....." style="border:0px;margin:0px" /><img src="...." style="border:0px;margin:0px" /> 

圖像之間的空間消失，在所有的瀏覽器！

爲什麼????????

Answer 1

<img src="http://www.nataliedee.com/111908/whatever-dude-whatever.jpg" style="border:0px;margin:0px;float:left;width:200px;" /> 
<img src="http://www.nataliedee.com/111908/whatever-dude-whatever.jpg" style="border:0px;margin:0px;clear:both;width:200px;" /> 

http://jsfiddle.net/JNWc7/

Answer 2

出於同樣的原因，有在該段落中的字母A和B之間的空間：

<p>a 
b</p> 

在HTML的任何種空間被視爲空間（和摺疊成一個單一的空間）。

Answer 3

這是因爲空白對於內聯元素很重要。如果你想讓它們排列起來，你總是可以浮動圖像。

編輯：按照要求，這裏是一個簡單的例子：http://jsfiddle.net/6ZF9v/

Answer 4

這樣做的原因是因爲HTML對待新的行字符爲空白，並打印空白。

Answer 5

這是因爲你的換行符呈現爲一個空間。

要避免它，請確保您的標籤之間沒有空白。 這是我平時做的：

<img src="....." style="border:0px;margin:0px" 
/><img src="....." style="border:0px;margin:0px" /> 

當然，這是醜陋的。但這是處理它的最好方法。

有關其他答案的注意事項：浮動具有各種不同的效果，您可能不希望（最重要的是，它們浮動在其他內容旁邊）。如果你只是想內嵌圖像，這是你的解決方案。

Answer 6

如果您在圖像中沒有任何文字，font-size：0;也修復了這個問題

Answer 7

對這個問題有這麼多好的答案，但我認爲這對於未來任何人來說都是有用的。

<img>元素流內嵌像文本一樣，但也有像塊元素一樣的寬度和高度。在CSS中，您可以將元素設置爲display: inline-block以使其複製圖像的行爲，因此將<img> s設置爲inline-block（瀏覽器技術上使用display: inline，但它們對圖像如inline-block元素給予特殊處理）會很好。

因此，如果你添加一個空白樣

• 空間
• 標籤
• newine

位於它們之間的差距將會出現。

根據不同的情況，可以使用以下兩種方法來擺脫的差距：

• 添加負margin-left
• 使用float

• 取出之間的空白元素，可以做到：

  1-把主題放在一行

  <img src="..."><img src="..."> 
  

  2-卸下空間

  <img src="...">< 
  img src="..."> 
  

  3-使用HTML註釋

  <img src="..."><!-- 
  --><img src="..."> 
  

  4-跳至結束標記（在情況下，存在這就像li）。 （僅HTML5）

  <ul> 
      <li>First 
      <li>Second 
  </ul> 
  

  5- font-size: 0父元素