CSS インラインブロックの改行によって生じるギャップを削除する方法-CSSチュートリアル-php.cn

CSS インラインブロックの改行によって生じるギャップを削除する方法

不言

リリース： 2018-11-26 09:19:52

オリジナル

3984 人が閲覧しました

インライン要素とインラインブロック要素の使用には問題があり、ソースコード内に存在する改行を表示すると空白が形成されてしまいます。この記事ではその方法を紹介します。 CSS を削除するにはインラインブロックの改行が隙間の原因となります。

inline-block 使用時にギャップが生じる理由

inline-block はインライン要素と同様に処理でき、単純に水平に配置でき、水平方向の幅と垂直方向を与えることができます。幅など非常に便利なセットアップですので、様々な用途にご利用いただけます。

しかし同時に、インラインブロックを使用するときに、いわゆるギャップの問題によく遭遇します。

HTML

<div class="container">
  <div class="inline-contents"></div>
  <div class="inline-contents"></div>
  <div class="inline-contents"></div>
</div>

ログイン後にコピー

CSS# の例を見てみましょう。 ##

 .container {
  display: block;
  border: 1px #000 solid;
}
.inline-contents {
  width: 33.3333%;
  height: 200px;
  display: inline-block;
  background-color: #66b6d5;
}

ログイン後にコピー

効果は次のとおりです:

CSS インラインブロックの改行によって生じるギャップを削除する方法

上の図から、右側と下部に値が設定されていないことがはっきりとわかりますが、ギャップがあります

したがって、幅: 33.3333% (つまり、1 / 3 未満) の 3 つのボックスは水平に配置される必要がありますが、最後のボックスは新しい行に配置されます。

今回box-sizingを設定してmarginとpaddingを0にしても変化はありません。

inline - inline要素の横のブロックは「横の配置」の問題だけでなく、font-sizeやline-heightなどの値にも影響を与える場合があります。

インラインのギャップを解消する方法 - ブロック

以下に表示されるギャップは文字のデフォルト設定であり、ベースラインは次のようになります。試してみるプロパティ以下に少し隙間をあけてください。

CSS インラインブロックの改行によって生じるギャップを削除する方法

(つまり、vertical-align:bottom; を .inline-contents に適用すると、下のギャップの問題のみが修正されます。)この隙間は < div > 間の行変更によるものなので、すべて削除することで解決できますが、 < div > の間にコメントを書くことはできますが、コードが非常に複雑になります。実際には、親要素 (.container) に「font-size: 0;」という値を記述するだけで問題は解決します。

なぜ親要素と言えるのかというと、inline-blockを設定した要素自体が「文字」の性質を持っているからです。

例を見てみましょう

HTML

<div class="container">
  <div class="inline-contents">aaa
  </div>
  <div class="inline-contents">aaa<br>
    aaa
  </div>
  <div class="inline-contents">aaa</div>
</div>

ログイン後にコピー

CSS

.container {
  display: block;
  border: 1px #000 solid;
  font-size: 0; 
}

.inline-contents {
  width: 33.3333%;
  height: 200px;
  display: inline-block;
  background-color: #66b6d5;
  font-size: 16px;
}

ログイン後にコピー

インラインブロックにテキストを入力してください新しい inlin-block で font-size が設定されていれば問題ありません。

ただし、各ボックス内のテキストの行数が異なる場合、この問題が発生します。

この場合は、inline-blockにvertical-align:bottomとfont-sizeを追加することで解決します。 CSS インラインブロックの改行によって生じるギャップを削除する方法

CSS

.container {
  display: block;
  border: 1px #000 solid;
  font-size: 0; 
}

.inline-contents {
  width: 33.3333%;
  height: 200px;
  display: inline-block;
  background-color: #66b6d5;
  font-size: 16px;
  vertical-align: bottom;
}

ログイン後にコピー

効果は次のとおりです:

この記事はここで終了です。さらにエキサイティングなコンテンツをご覧いただけます。 php 中国語 Web サイトの CSS インラインブロックの改行によって生じるギャップを削除する方法 CSS ビデオチュートリアル