2

重複の可能性：
HTMLの空白を無視する

ウェブページに画像を並べて表示しようとしています。これが私のHTMLです：

<img class="pt" src="Yellow Tulip.jpg" title="Yellow Tulip" alt="Yellow Tulip" />
<img class="pt" src="Pink Tulip.jpg" title="Pink Tulip" alt="Pink Tulip" />
<img class="pt" src="Purple Tulip.jpg" title="Purple Tulip" alt="Purple Tulip" />

しかし、私のWebページでは、これは各画像間のギャップを示しています。要素を分離して読みやすくする戻り行を削除し、代わりにすべての要素を1行に配置すると、ギャップがなくなることに気付きました。

<img class="pt" src="Yellow Tulip.jpg" title="Yellow Tulip" alt="Yellow Tulip" /><img class="pt" src="Pink Tulip.jpg" title="Pink Tulip" alt="Pink Tulip" /><img class="pt" src="Purple Tulip.jpg" title="Purple Tulip" alt="Purple Tulip" />

とにかく後者の出力を達成できますが、コード/入力は前者のように見えますか？戻り行（スペースを入力）がコードにもたらす読みやすさは本当に気に入っていますが、実際のページに空白が作成されることは望ましくありません。誰かがこれがなぜであるか、そして/またはそれを修正する方法を説明することができれば、私は本当に感謝するでしょう！:)

4

1 に答える 1

1

のように画像を浮かせることができます

#container img { float: left }

またはコンテナのフォントサイズを設定して、スペースを非表示にします

#container { font-size: 0 }
于 2012-10-14T21:40:31.397 に答える