HTMLの「空白文字」を本当に理解していますか？ _html/css_WEB-ITnose

最近ある仕事のため、一時的にフロントエンドコーダーに変身しました(実際はジュニアCSSを書くただの負け犬)。この期間中、私はおおよそ次のような要件を持っていました:

div などの親コンテナーがあり、この div の幅は固定されています。ここで、この div に 5 つの img を挿入したいと思います。これらの 5 つの img は同じ幅です。同時に、もちろん、これら 5 つの img に付随して 4 つのギャップがあり、これら 4 つのギャップも同じ幅です。

もちろん、パーセンテージ幅に基づいて簡単な調整が必要です。

とても簡単だと思いますか?はは、プロのフロントエンドエンジニアはもちろん、私のような初心者でも簡単だと思います。

PSD レンダリングに従って、対応するパーセンテージ サイズを測定したので、次の HTML および CSS コードを記述しました。

// HTML 文件<div class="parent">    <img class="element" src="http://xxxxxxx.com/shshshshs.png" />    <img class="element" src="http://xxxxxxx.com/shshshshs.png" />    <img class="element" src="http://xxxxxxx.com/shshshshs.png" />    <img class="element" src="http://xxxxxxx.com/shshshshs.png" />    <img class="element" src="http://xxxxxxx.com/shshshshs.png" /></div>// css 文件.parent {    width:x%;}.parent img {    width:y%;    height:auto;    margin-left:k%;}.parent img:first-child {    margin-left:0;}

このコードは非常に簡潔かつ明確です。基本的に、業界のほとんどが同様に各画像と画像間の間隔を制御します。

論理的に言えば、基本的には、img は インライン置換可能な要素 であり、 行内に自動的に配置されます。親コンテナの幅が十分であることを確認してから、次の を実行します。でも頑張ってきたから問題ないはず。

しかし、クソ、心配すればするほど、より多くのことが起こります。インターフェース全体で非常に奇妙な現象が発生しました:

这是正常情况：[图<->图<->图<->图<->图] 这是实际情况：[图<->图<->图<->图<->］图]

しまった、幅が足りず改行してしまいました。長い間試した結果、.parent img に float:left を追加すると問題を完全に解決できることがわかりました。しかし、その理由は何でしょうか?

理由

いくつかの探索と調査の結果、が見つかりました。これは、inline 型の要素に対する 空白文字 の影響によるものです。

• まず、img 要素はインライン置換可能な要素であり、その効果は基本的に inline-block として理解できます。

• 次に、HTML を書くとき、エディターで美しく書くためにキャリッジ リターンをよく使用しますが、HTML ではキャリッジ リターンは空白文字として認識されます。

  比如<img src = "xxxx" />（空白符）<img src = "xxxx" />

• 第三に、空白には幅 (フォント サイズに関連) がありますが、高さはありません。

したがって、表面的には、設計された図に基づいて正確に測定し、親クラスの幅に完全に一致する要素と間隔を構築しましたが、実際には空白のせいで文字、幅によりズレが生じます。

空白があることの効果を示すために図を使用します:

[图(空白)<->图(空白)<->图(空白)<->图<->］

フロートでこの問題を解決できる理由

フローティングされたボックスは左に移動するか、その外側のエッジが、それを含むブロックのエッジまたは別の float の外側のエッジに触れるまで右に移動します

float のこの定義を参照してください? float は、前 (または次) の float 要素の境界、またはその親要素の境界に依存します。空白文字は、それを含むブロック (親コンテナ) の境界でも、別の float 要素でもないため、影響を受けず、他の float 要素にも影響を与えません。

したがって、.parent img で float:left を有効にすると、効果は次のようになります:

[float<->float<->float<->float<->float][空白符]

今回は、測定した幅が正確に一致するため、空白文字は自然に表示されます。次の行に押し込みます。空白には高さがないということについて前に述べたことを覚えていますか?したがって、空白文字はまったく効果がありません。

本文中の [] は親コンテナを表し、<-> は間隔を表します。

その他の解決策

1. 親コンテナのフォントサイズを 0 に設定します。
2. 改行を避けて次のようなコードを記述してください。
3. HTML 圧縮を有効にします。

最後に: この料理の比較について指導してくれた Meituan マスター FTR と Taobao マスター YWJ に感謝します。