縮進HTML和內嵌HTML之間的區別

我正在重寫客戶端網頁，並且我在HTML呈現方面存在一些問題。縮進HTML和內嵌HTML之間的區別

下一個代碼是舊的HTML和所有的「a」和「IMG」標籤是像這樣（INLINE IMG）一行：

<div id="inside-img"> 
    <div class="img" style="width:8643px"><a href=""><img src=""/></a><a href=""><img src=""/></a>... ...</div> 
</div>

當我重寫這個，像這樣更好地縮進（縮進IMG）：

<div id="inside-img"> 
    <div class="img" style=""> 
     <a href=""><img src=""/></a> 
     <a href=""><img src=""/></a> 
     ... 
    </div> 
</div>

HTML的輸出中斷，您可以在我已附加的圖像中看到。

有很多圖像和最後一張圖片，向下移動而不是在時間軸的末尾。我不知道爲什麼當我縮進HTML，HTML樣式改變。

來源

2017-06-21 Iker Ocio Zuazo

空間圖像與無空間之間...... – deceze

任何與原始版本中固定像素的內聯風格有關的事情？第二個是導致最後一張圖像在下面摺疊的定義寬度？ – MegaTron

如果你只有圖像，你可以用'font-size：0;'在'' – Chiller

看起來與設置爲display的元素有關的問題爲inline-block s，其佔空白。雖然OP沒有提供相關的標記任何CSS，這應該工作：

<div id="inside-img"> 
    <div class="img" style="font-size:0;"> 
     <a href=""><img src=""/></a> 
     <a href=""><img src=""/></a> 
     ... 
    </div> 
</div>

或本（注意額外評論）

<div id="inside-img"> 
    <div class="img" style=""> 
     <a href=""><img src=""/></a><!-- 
     --><a href=""><img src=""/></a><!-- 
     -->... 
    </div> 
</div>

對於一個完整的解釋見https://css-tricks.com/fighting-the-space-between-inline-block-elements/

來源

2017-06-21 11:21:06 pecus

它已經解決了設置你的第一個選項。晚上我會在你的鏈接中看到完整的解釋。萬分感謝。 –

這樣呢，因爲inline項目之間的空白。在HTML中的inline項目之間的空白區域可以在屏幕上顯示。由於圖像是內聯項目，因此您的第一個代碼示例在HTML標記之間沒有任何空格。而在第二個示例代碼中它們是它們之間的空格（新行），這將在HTML中顯示爲字符（即空格）。

可能的解決方案是使用父div上的Font-size: 0;。

來源

2017-06-21 11:19:53

縮進HTML和內嵌HTML之間的區別

回答

相關問題