CSS画像の下の隙間の問題を解決する方法

この記事では、主に CSS 画像の下のギャップの問題に対する 6 つの解決策を紹介します。必要な友人はそれを参照してください。

ページ上で p+CSS 組版を行うときに、IE6 に遭遇しました (もちろん、Firefox で遭遇することもありました)。ブラウザー 画像要素の下の余分な空白の問題は、間違いなく一般的です。この問題の解決策も「耳で再生する」ことです。ここでの解決策は、冗長性を直接解決することです。画像レイアウトの下のスペース ギャップのバグを修正するために一般的に使用される方法の概要が参考のために提供されています。

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

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

display: block

この例では、一連の CSS コードを追加します。 IE6/7

2. 画像の垂直方向の配置を設定する つまり、画像の垂直方向の配置属性を「top、text-top、bottom、text-bottom」に設定することでも解決できます。たとえば、この例では、CSS コードのセットを追加します:

#sub img {display:block;}

3. 親オブジェクトのテキスト サイズを 0px に設定します

つまり、#sub:

#sub img {vertical-align:top;}

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

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

この例では、次のコードを #sub に追加できます:

 font-size:0;

5. 画像のフローティング属性を設定しますつまり、この例では CSS コードの行を追加します:

width:88px;height:31px;overflow:hidden;

グラフィックとテキストの混合配置を実装したい場合は、この方法が良い選択です。

6. 画像タグとその親オブジェクトの最後の終了タグの間のスペースをキャンセルします。 この方法は実際の開発で問題を引き起こす可能性があることを強調しておく必要があります。コードを記述する際にコードをよりセマンティックかつ明確にするために、IDE を通じてコードのインデント表示を提供することが避けられず、ラベルが必然的に作成されるためです。 DW の「ソース形式の適用」コマンドなど、他のラベルは新しい行に表示されます。したがって、この方法は、バグが発生する状況を理解するのに役立ち、具体的な解決策を全員で解決する必要があります。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

CSS3 のアニメーション属性の使用分析について

CSS 外部ファイルを参照する 2 つの方法

以上がCSS画像の下の隙間の問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。