インデント付きHTMLとインラインHTMLの違い

Question

クライアントのWebページを書き直していますが、HTMLレンダリングにいくつか問題があります。私はこれを書き換えた場合、このような優れたインデント（字下げして、

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

：

次のコードは、古いHTML、すべての「」と「IMG」タグは、このような1行（INLINE IMG）であるですIMG）：

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

添付の画像に表示されているように、HTMLの出力が壊れます。

多くの画像があり、最後の画像は、タイムラインの最後ではなく下に移動します。私はHTML、HTMLスタイルの変更をインデントする理由はわかりません。

Answer 1

displayに設定された要素に関連する問題は、空白を考慮してinline-blockと表示されます。 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/

Answer 2

これはinline項目間の空白の起こります。 HTMLのinlineの項目の空白が画面に表示されます。画像がインライン項目であるため、最初のコードサンプルにはHTMLタグの間にスペースがありません。 2番目のサンプルコードでは、それらのスペース（改行）はHTMLの文字（つまりスペース）として表示されます。

この可能な解決方法は、Font-size: 0;を親のdivに使用しています。