CSS画像の下のギャップに対処する方法

今回は、CSS画像の下に隙間がある場合の対処方法と、CSS画像の下に隙間がある場合の注意点についてご紹介します。以下は実際のケースです。見てみましょう。

ページ上で p+CSS 組版を行う場合、IE6 の画像要素 img の下に余分な空白の問題が発生するのはよくあることです (もちろん、Firefox でも発生する場合があります)。この問題の解決策も「を参照してください。」機会」「行動」、さまざまな理由に応じてさまざまな解決策を使用する必要があります。ここでは、参考のために、画像レイアウトの下の余分なギャップのバグを解決するための一般的な方法をまとめます。

1. 画像をブロックレベルのオブジェクトに変換します

つまり、img を次のように設定します。

display: block; この例では、一連の CSS コードを追加します。 {display: block;}

IE6/7は無効です#sub img {display:block;}

IE6/7无效

2、设置图片的垂直对齐方式

即设置图片的vertical-align属性为「top，text-top，bottom，text-bottom」也可以解决。如本例中增加一组CSS代码： #sub img {vertical-align:top;}

3、设置父对象的文字大小为0px

即，在#sub中添加一行： font-size:0;

可以解决问题。但这也引发了新的问题，在父对像中的文字都无法显示。就算文字部分被子对像括起来，设置子对像文字大小依然可以显示，但在CSS效验的时候会提示文字过小的错误。

4、改变父对象的属性

如果父对象的宽、高固定，图片大小随父对像而定，那麽可以设置： overflow:hidden; 来解决。

如本例中可以向#sub中添加以下代码： width:88px;height:31px;overflow:hidden;

5、设置图片的浮动属性

即在本例中增加一行CSS代码： #sub img {float:left;}

2.画像の縦方向の配置を設定します

つまり、画像を設定しますvertical-align属性は「top、text-top、bottom、text-bottom」ですが、これも解決できます。たとえば、この例では、一連の CSS コードを追加します: #sub img {vertical-align:top;}3. 親オブジェクトのテキスト サイズを 0px に設定します

#sub に行を追加します: font-size

:0;

で問題を解決できます。しかし、これにより親オブジェクト内のテキストが表示できないという新たな問題も発生しました。テキスト部分がサブオブジェクトで囲まれていても、サブオブジェクトのテキストサイズを設定することで表示可能ですが、CSSの検証時にテキストが小さすぎるというエラーが表示されます。

4. 親オブジェクトの属性を変更します

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

この例では、次のコードを #sub に追加できます: width:88px;height:31px;overflow:hidden;

5. 画像を設定します。 : //www.php.cn/code/6046.html" target="_blank">Floating 属性

は、この例では CSS コードの行を追加することを意味します。 #sub img {float:left; }

🎜画像とテキストの混合配置を実現したい場合は、この方法が良い選択です。 🎜🎜🎜🎜6. 🎜画像タグ🎜とその親オブジェクトの最後の終了タグの間のスペースをキャンセルします。 🎜🎜🎜🎜この方法は実際の開発で問題を引き起こす可能性があることを強調しておく必要があります。コードを記述する際にコードをよりセマンティックかつ明確にするために、IDE を通じてコードのインデント表示を提供することが避けられず、ラベルが必然的に作成されるためです。 DW の「ソース形式の適用」コマンドなど、他のラベルは新しい行に表示されます。したがって、この方法は、バグが発生する状況を理解するのに役立ち、具体的な解決策を全員で解決する必要があります。 🎜🎜🎜🎜🎜🎜この記事の事例を読んだ後、あなたはその方法をマスターしたと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 🎜🎜推奨読書: 🎜🎜🎜CSSを完全に使用して要素を中央に配置する🎜🎜🎜🎜🎜疑似要素::beforeと::afterの使用の詳細な説明🎜🎜🎜🎜🎜 font-size-adjust属性がWebを最適化する方法ページレイアウト🎜🎜🎜

以上がCSS画像の下のギャップに対処する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。