ホームページ >ウェブフロントエンド >CSSチュートリアル >インラインブロック画像の下の不要なスペースを削除するにはどうすればよいですか?

インラインブロック画像の下の不要なスペースを削除するにはどうすればよいですか?

Mary-Kate Olsen
Mary-Kate Olsenオリジナル
2024-11-03 17:36:02502ブラウズ

How to Eliminate Unwanted Space Below Inline-Block Images?

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

インライン ブロック画像を使用すると、余分なスペースが存在するという問題が発生する可能性があります。画像の下部とそのラッパーの間のスペース。これは、インライン要素のデフォルトの垂直方向の配置が原因です。

解決策: 垂直方向の配置を使用します

不要なスペースを削除するには、垂直方向の配置を設定する必要があります。イメージのために。これは、vertical-align プロパティを使用して行うことができます。 vertical-align:top を指定すると、画像がラッパーの上部に配置され、余分なスペースが削除されます。

例:

に次のスタイルを追加します。 CSS:

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

デモ:

この JSFiddle: http://jsfiddle.net/dJVxb/4/ で実際の例を確認できます。更新された CSS により、不要なスペースが削除され、画像がラッパーの上部に配置されます。

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。