画像の下部にある空白の問題に対する 6 つの解決策

この記事では、画像の下部にある空白の問題に対する 6 つの主要な解決策を紹介します。困っている友人が参考になれば幸いです。

画像の margin 属性 (img タグ) に margin-bottom の値が設定されていない場合があり、一部のブラウザでは空白の下部が表示されます。以下では、この問題を解決するいくつかの方法を紹介します。

1. 画像をブロックレベル要素として設定します。

例: img{display:block;}

2。画像の垂直方向の配置を設定します。

例: img{vertical-align:top;}(vartical-align の値はオプションで、text-top、bottom、text-bottom などに応じて異なります) )

3. 親オブジェクトのテキスト サイズを 0px

に設定します。例: img の親オブジェクトが imgClass の場合、属性 font- を追加するだけで済みます。 size:0pxをimgClassにします。ただし、これにより、親オブジェクト内のテキストが正しく表示されなくなります。テキスト部分がサブオブジェクトで囲まれていても、サブオブジェクトのテキストサイズを設定することで表示できますが、CSS検証時にテキストが小さすぎるというエラーメッセージが表示されます。

4. 親オブジェクトのプロパティを変更する

親オブジェクトの高さと幅が固定されており、画像のサイズが親オブジェクトに依存する場合は、次のことができます。親オブジェクトを設定します: overflow:hidden ;

5. 画像

のフローティング属性を設定します: img{float:left;}

6. 画像タグをキャンセルし、その親オブジェクトの最後の終了タグ間のスペース

## を作成するために、空白のインデントを追加することがよくあります。ページコード階層をクリアします。

一般に、画像を混合する必要がない場合は、方法 1) を使用することをお勧めします。画像とテキストを混合したい場合は、方法 5) を使用することもできます。より良いですが、フロートをクリアすることを忘れないでください。もちろん、どの方法を使用するかは、特定の状況や個人の好みによって異なります。

上記は、画像の下部にある空白の問題に対する 6 つの主要な解決策の完全な紹介です。

HTML チュートリアルについて詳しく知りたい場合は、 をご覧ください。 PHP 中国語 Web サイトに注意してください。

以上が画像の下部にある空白の問題に対する 6 つの解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。