インラインブロック画像の下にスペースがあるのはなぜですか?それを修正するにはどうすればよいですか?

インラインブロック画像の下のスペースを解決する

コード例では、ディスプレイを使用してテキストとインラインで画像を表示しようとしています。 inline-block プロパティですが、画像の下に不要なスペースがあることに注意してください。これに対処するために、原因と包括的な解決策を詳しく見てみましょう。

インライン要素は潜在的なテキスト コンテンツのためにその下にスペースを自然に確保するため、image 要素に続く改行によってスペースが作成されます。画像にはテキスト コンテンツが含まれていないため、このスペースは空いたままとなり、不要なギャップとして表示されます。

このスペースを削除するには、改行を削除する必要があります。これを実現する 1 つの方法は、画像のvertical-align プロパティを top に設定することです。これにより、画像の上部が周囲のテキストのベースラインと垂直方向に揃えられます。

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

この調整により、画像の下のスペースがなくなり、画像が周囲のコンテンツと同じ高さになるようになります。これを確認するには、提供されているフィドル http://jsfiddle.net/dJVxb/4/.

のコードを変更します。

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