インラインブロック要素のギャップを削除する CSS メソッド_html/css_WEB-ITnose

最近モバイルページを作る場合、レイアウトにインラインブロック要素を使うことが多いのですが、必ず問題になるのがインラインブロック要素間の隙間です。これらのギャップはレイアウト上の問題を引き起こすため、ギャップを除去する必要があります。ここでは、インラインブロック要素とギャップを削除する方法について簡単にまとめます。

inline-block とは何ですか?

Inline-block は、CSS 要素の分類で、インライン要素またはインライン要素、ブロックレベル要素、およびインライン ブロック要素の 3 種類に分類できるインライン ブロックです。

インライン ブロック要素には、インライン要素とブロック レベルの要素の特性があります: (1) 要素を水平に配置できます (2) ブロック レベルの要素として使用して、幅、高さ、パディングなどのさまざまな属性を設定できます。待って。

例 1: インライン要素のスパンを inline-block 要素として定義する

<div id="demo">    <span>我是一个span</span>    <span>我是一个span</span>    <span>我是一个span</span>    <span>我是一个span</span></div>#demo span{    display:inline-block;　　 background:#ddd;}

レンダリング:

inline-block の互換性

(1) インラインレベルの要素

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

(2) ブロック レベル要素

IE7 以下のブラウザは、ブロック要素を完全にはサポートしていません。インライン レベル要素をインライン ブロックとして定義する場合にのみサポートされます。

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

例 2:

<div id="demo">    <div>我是一个div</div>    <div>我是一个div</div>    <div>我是一个div</div>    <div>我是一个div</div></div>#demo div{    display:inline-block;    *display:inline; /*IE7 hack*/    *zoom:1; /*触发hasLayout*/}

IE7 以下のブラウザ: ブロック レベルの要素は inline-block に変換され、IE7 以降のブラウザでは要素間にギャップはありません。 inline-block にすると、IE7 以下のブラウザでは要素間に隙間が生じ、ブロックレベルが inline-block に変換された要素の直後に、inline-block に変換される要素が存在します。これら 2 つの要素の間にギャップはありません。IE7 では、インライン レベルからインライン ブロックに変換された要素の直後に、2 つの要素の間にギャップが発生します。他のブラウザでは、どのような状況でもギャップが発生します。

inline-block 要素のギャップの原因

例 1 では、inline-block 要素を定義するとギャップが生じます。 display:inline-block が設定されていませんか?以下の通り:

例 3:

<div class="demo">        <span>我是一个span</span>        <span>我是一个span</span>        <span>我是一个span</span>        <span>我是一个span</span></div>.demo span{     background:#ddd;}

レンダリング:

上記の例では、スパンに何も処理されていないのにまだギャップがあります。これは構造上の問題でしょうか?すべての Span タグが 1 行で記述されている場合、どのような影響があるでしょうか。見てみましょう:

rrree

レンダリング:

改行またはキャリッジリターンによってギャップが発生していることがわかります。ラベルが 1 行で書かれているか、ラベルにスペースがない限り、空白はありません。ただし、この方法はあまり信頼性が低く、コード生成ツール、コードの書式設定、他の人によるコードの変更など、失敗につながる制御不能な要因が多すぎます。ギャップを除去するためのさまざまな方法を以下に示します。それらが適切かどうかは、特定のアプリケーション シナリオによって異なります。

インラインブロック要素間の隙間をなくす方法

(1) ラベル間の隙間を取り除く

要素間に隙間ができる原因は、要素ラベル間の隙間を取り除くと自然に隙間が消えます。次の記述方法を見てみましょう：

*書き込み方法1：

rreee

*書き込み方法2：

rreee

*執筆方法

<div class="demo">        <span>我是一个span</span><span>我是一个span</span><span>我是一个span</span><span>我是一个span</span>    </div>.demo span{         background:#ddd;}

.demo span{

background:#ddd;

display: inline-block;

}

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

<div class="demo">        <span>我是一个span</span><span>我是一个span</span><span>我是一个span</span><span>我是一个span</span>    </div>

この方法は Meituan Webapp ページで使用されているようです。以下をご覧ください:

ソースコード:

(3) 親コンテナーで font-size:0; を使用します。

ギャップを解消するには、親コンテナーで font-size:0; を使用します。次のように記述できます:

<div class="demo">        <span>我是一个span        </span><span>我是一个span        </span><span>我是一个span        </span><span>我是一个span</span>    </div>

Chrome の場合、互換性を考慮してデフォルトでフォント サイズの制限を解除する必要があります:

<div class="demo">        <span>我是一个span</span><!--         --><span>我是一个span</span><!--         --><span>我是一个span</span><!--         --><span>我是一个span</span>    </div>

概要

モバイル ページでは、個人的には font-size:0 を使用してクリアすることを好みます。 PC の場合は、doyoe の完全なブラウザ互換性ソリューションを参照してください。

上記は、私が仕事中にいくつかの問題に遭遇したことをまとめたものです。欠点があれば修正してください。

ご提案やご質問がございましたら、ディスカッションのためにメッセージを残してください。

この記事が良いと思ったら、右下のおすすめをクリックしてください。

その他の記事:

インラインブロック要素間のスペースを削除する N 個の方法

インラインブロック要素間の空白を解決する方法

float の代わりに inline-block を使用する必要があります