CSS でインラインブロック要素間のギャップを削除するいくつかの方法の詳細な説明

最近、モバイルページを制作する際には、レイアウトにインラインブロック要素がよく使われますが、インラインブロック要素間の隙間がどうしても生じてしまうという問題があります。これらのギャップはレイアウト上の問題を引き起こす可能性があるため、削除する必要があります。ここでは、インライン ブロック要素とギャップを削除する方法について簡単に説明します。

インラインブロックとは何か

inline-block またはインライン ブロックは、CSS 要素の分類では、インライン要素またはインライン要素、ブロックレベル要素、およびインライン ブロック要素の 3 つのタイプに分けられます。

インラインブロック要素は、インライン要素とブロックレベル要素の両方の特性を持ちます。(1)要素を水平に配置でき、(2)ブロックレベル要素として扱い、幅、高さ、パディングなどのさまざまな属性を設定できます。

例1: インライン要素スパンをインラインブロック要素として定義する

<div id="デモ">
    <span>私はspanです</span>
    <span>私はスパンです</span>
    <span>私はスパンです</span>
    <span>私はスパンです</span>
</div>
#デモスパン{
    表示:インラインブロック;
  背景:#ddd;
}

効果画像:

インラインブロックの互換性

（１）インラインレベルの要素

インライン要素の場合、すべての主要ブラウザは、display 値を inline-block に直接設定して、インライン ブロックとして定義することをサポートしています。

（２）ブロックレベル要素

IE7 以下のブラウザは、ブロックレベル要素を完全にはサポートしていません。インラインレベル要素をインラインブロックとして定義するために display:inline-block を使用することのみをサポートしています。

IE7 以下のブラウザは、インライン レベル要素をインライン ブロックに直接設定することをサポートしているため、最初にブロック レベル要素をインラインに設定し、次に要素の hasLayout をトリガーしてインライン ブロックと同様の機能を付与することで、回避策として実装できます。次のように記述できます:

例2:

<div id="デモ">
    <div>私はdivです</div>
    <div>私はdivです</div>
    <div>私はdivです</div>
    <div>私はdivです</div>
</div>
#デモ div{
    表示:インラインブロック;
    *display:inline; /*IE7 ハック*/
    *zoom:1; /*トリガーhasLayout*/
}

IE7 以下: ブロック レベル要素はインライン ブロックに変換され、IE7 以下では要素間に隙間が表示されません。インライン レベル要素はインライン ブロックに変換され、IE7 以下では要素間に隙間が表示されます。ブロック レベルからインライン ブロックに変換された要素の直後に、インライン レベルからインライン ブロックに変換された要素があり、IE7 以下では 2 つの要素間に隙間が表示されません。インライン レベルからインライン ブロックに変換された要素の直後に、ブロック レベルからインライン ブロックに変換された要素があり、IE7 以下では 2 つの要素間に隙間が表示されます。その他のすべてのブラウザーでは隙間が表示されます。

インラインブロック要素ギャップの起源

例 1 では、inline-block として定義された要素によってギャップが生成されます。display:inline-block が設定されていない場合はどのような効果がありますか?次のように：

例3:

<div class="demo">
        <span>私はスパンです</span>
        <span>私はスパンです</span>
        <span>私はスパンです</span>
        <span>私はスパンです</span>
</div>

.demo span{
     背景:#ddd;
}

効果画像:

上記の例では、スパンに処理がされていないため、ギャップが残っています。これはなぜでしょうか？構造上の問題でしょうか？すべての span タグを 1 行に記述した場合の効果を見てみましょう。

<div class="demo">
        <span>私は span です</span><span>私は span です</span><span>私は span です</span><span>私は span です</span>
    </div>
.demo span{
         背景:#ddd;
}

効果画像:

改行や復帰によってギャップが発生していることがわかります。タグを 1 行に記述するか、タグ間にスペースを入れずに直接記述する限り、ギャップは発生しません。ただし、この方法はあまり信頼性が高くありません。コード生成ツール、コードのフォーマット、他の人によるコードの変更など、失敗の原因となる制御不能な要因が多すぎるためです。ギャップを除去するさまざまな方法を以下に示します。これらが適切かどうかは、特定のアプリケーション シナリオによって異なります。

インラインブロック要素間の隙間を削除する

（1）タグ間のスペースを削除する

要素間のギャップは、要素タグ間のスペースによって発生します。スペースを削除すると、ギャップは消えます。次の書き方を見てみましょう。

*書き方1:

<div class="demo">
        <span>私は span です</span><span>私は span です</span><span>私は span です</span><span>私は span です</span>
    </div>

*書き方2:

<div class="demo">
        <span>私はspanです
        </span><span>私はspanです
        </span><span>私はspanです
        </span><span>私は</span>
    </div>

*書き方3: HTMLコメントタグを使う

<div class="demo">
        <span>私は span です</span><!-- 
        --><span>私は span です</span><!-- 
        --><span>私は span です</span><!-- 
        --><span>私はspanです</span>
    </div>

（２）タグクローズをキャンセルする

<div class="demo">
        <span>私はspanです
        <span>私はspanです
        <span>私はspanです
        <span>私はspanです
    </div>

.demo span{
	     背景:#ddd;
	     表示: インラインブロック;
		}

隙間ができないようにspanタグの終了タグを削除します。 IE6/IE7 と互換性を持たせるには、最後のタグを閉じる必要があります。

<div class="demo">
        <span>私はspanです
        <span>私はspanです
        <span>私はspanです
        <span>私はスパンです</span>
    </div>
.デモスパン{
         背景:#ddd;
         表示: インラインブロック;
        }

この方法は Meituan ウェブアプリ ページで使用されているようです。以下が見られます:

ソースコード:

（３）font-size:0を使用する

親コンテナで font-size:0; を使用すると、ギャップをなくすことができます。次のように記述します。

<div class="demo">
        <span>私はspanです
        <span>私はspanです
        <span>私はspanです
        <span>私はスパンです</span>
    </div>
    .demo {フォントサイズ: 0;}
    .デモスパン{
         背景:#ddd;
         表示: インラインブロック;
         font-size: 14px; /*対応するフォントサイズを設定します*/
    }

Chrome では、デフォルトで最小フォントサイズ制限があります。互換性を考慮すると、フォントサイズ制限を解除する必要があります。次のように記述します。

<div class="demo">
        <span>私はspanです
        <span>私はspanです
        <span>私はspanです
        <span>私はspanです</span>
    </div>
    .demo {フォントサイズ: 0;-webkit-テキストサイズ調整:なし;}
    .デモスパン{
         背景:#ddd;
         表示: インラインブロック;
         font-size: 14px; /*対応するフォントサイズを設定します*/
    }

上記は仕事で遭遇したいくつかの問題に関する知識のまとめです。皆様の勉強のお役に立てれば幸いです。また、皆様が 123WORDPRESS.COM を応援していただければ幸いです。