コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > 私の HTML5 画像の下マージンが謎の 3 ピクセルになっているのはなぜですか?

私の HTML5 画像の下マージンが謎の 3 ピクセルになっているのはなぜですか?

Mary-Kate Olsen
リリース： 2024-12-19 20:24:15
オリジナル
699 人が閲覧しました

Why Do My HTML5 Images Have a Mysterious 3px Bottom Margin?

HTML5 の謎: 予期せぬマージンを示す画像

Web サイトを HTML5 に変換するときに発生する特有の問題を考えてみましょう。予期せぬことに、CSS にはそのようなマージンがないにもかかわらず、DIV 要素内に囲まれたすべての画像に不可解な 3 ピクセルの下マージンが表示されました。広範な調査にもかかわらず、この異常の原因は依然としてわかりません。

この問題の兆候は、画像に 50x50 ピクセルのサイズが割り当てられ、含まれる DIV 要素 (

) がディスプレイで構成されていたときに明らかになりました。 ： テーブル。興味深いことに、.placeholder の高さの寸法は疑わしく 53 ピクセルに増加しました。

謎を解く

この複雑な動作の解決策は、画像の固有の特性を理解することにあります。 HTML。デフォルトでは、画像はテキスト文字と同様に動作するため、その下に「y」や「g」などの文字の仮想的な「尾部」用のスペースが確保されます。この問題を修正するには、CSS プロパティvertical-align を使用して、この追加の垂直方向のスペースがないことを示すことができます。

実装

不要な下マージンを削除するには、次の CSS ルールを組み込むだけです:

img {
    vertical-align: middle;
}
ログイン後にコピー

vertical-align の値を指定することで、画像の垂直方向が調整されます。親要素内の配置が調整され、予約されたスペースが効果的に中和されます。

視覚的検証

このソリューションは、更新された jsFiddle でエレガントに実証されています: [リンクが提供されています]。

以上が私の HTML5 画像の下マージンが謎の 3 ピクセルになっているのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース：php.cn
前の記事：有効な XHTML 1.1 で Div 要素をクリック可能なリンクのように動作させるにはどうすればよいですか? 次の記事：CSS の「content」プロパティで HTML を挿入できますか?
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2245
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2385
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1994
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1881
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1950
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート