インラインブロック画像の下に垂直方向の間隔が表示されるのはなぜですか?また、それを修正するにはどうすればよいですか?

インライン ブロック画像の下の垂直方向のスペースを削除する

Web 開発では、画像を配置するためにインライン ブロック要素がよく使用されます。ただし、これらの画像の下に不要な垂直方向のスペースが発生することがよくあります。これはなぜ発生しますか?また、どうすれば解決できますか?

質問に示されている例では、画像が緑色のラッパー (div) 内に配置されています。インラインブロックとして表示される場合、画像はラッパーの下部に表示され、上に空のスペースが残ります。インラインブロック表示を維持しながらこの問題を解決するには、画像の垂直方向の配置を調整する必要があります。

解決策は、CSS プロパティを追加することです。

<code class="css">vertical-align: top;</code>

このプロパティは、次のように配置します。画像の垂直ベースラインとそのラインの上部。その結果、画像はラッパーの上部と同じ高さに配置され、不要なスペースが削除されます。

vertical-align プロパティを適用すると、CSS は次のようになります。

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

この変更により、画像がラッパーの垂直方向の高さ全体を占めるようになり、空のスペースがなくなり、視覚的に整列したレイアウトが表示されます。

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