CSS 画像の下のギャップを解決する 6 つの方法-CSSチュートリアル-php.cn

CSS 画像の下のギャップを解決する 6 つの方法

小云云

リリース： 2017-12-23 13:32:44

オリジナル

3785 人が閲覧しました

ページ上で p+CSS 組版を行う場合、IE6 の画像要素 img の下に余分な空白の問題が発生するのはよくあることです (もちろん、Firefox でも発生する場合があります)。この問題の解決策も「再生する」ことです。 by Ear" " の場合、原因に応じて異なる解決策を使用する必要があります。ここでは、画像レイアウトの下に余分な隙間が発生するバグを解決する一般的な方法を直接まとめます。この記事では、主に CSS 画像の下に隙間がある場合の 6 つの解決策を紹介します。必要な友人はそれを参照できます。すべての人に役立つことを願っています。

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

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

display: block;

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

IE6/ 7 無効

2. 画像の垂直方向の配置を設定する

つまり、画像の垂直方向の配置属性を「top、text-top、bottom、text-bottom」に設定することでも解決できます。たとえば、この例では、一連の CSS コードを追加します: #sub img {vertical-align:top;}

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

つまり、#sub に行を追加します。 : font-size:0;

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

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

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

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

5 画像のフローティング属性を設定します

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

画像とテキストを混在させて配置したい場合は、この方法が適しています。

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

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