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

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

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

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

不要なスペースを削除するには、垂直方向の配置を設定する必要があります。イメージのために。これは、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 サイトの他の関連記事を参照してください。