インラインブロック画像の下に不要なスペースがあるのはなぜですか?

インライン ブロック画像の下の不要なスペースを削除する

Web 開発では、ラッパー内にインライン ブロック画像をシームレスに配置することが困難な場合があります。場合によっては、画像の下に隙間が生じ、見苦しい美観が残ることがあります。この問題は、本質的にその下にスペースを確保するインライン ブロック要素のデフォルトの動作から発生します。

基礎となるメカニズム

根本原因は CSS ボックス モデルにあります。画像などのインライン ブロック要素は、コンテンツ、パディング、境界線、およびマージンを含む長方形のボックスを形成します。デフォルトでは、インラインブロック要素の後に空行が含まれる場合、ブラウザはこれを改行として解釈し、レイアウト内に対応するギャップを作成します。

解決策: 垂直方向の配置

不要なスペースを削除するには、画像の垂直方向の配置を変更する必要があります。 CSS プロパティのvertical-align を top に設定すると、画像がインライン ブロック コンテナーの上端に揃えられ、隙間がなくなります。

CSS コード:

<code class="css">img {
    display:inline-block; 
    margin:0;
    vertical-align:top;
}</code>

例:

次の HTML とCSS:

<code class="html"><div id="wrapper">
    <img src="image.jpg">
</div></code>

<code class="css">#wrapper {
    background:green;
}

img {
    display:inline-block; 
    margin:0;
    vertical-align:top;
}</code>

結果:

vertical-align プロパティを適用すると、画像はラッパー内にぴったりと収まり、表示されるスペースがなくなりました。その下にあります。

以上がインラインブロック画像の下に不要なスペースがあるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。