[解決済み] HTML 5 の奇妙な img は常に下部に 3px のマージンを追加する [重複] 。

2022-05-13 18:36:53

質問

に変更したところ

<!DOCTYPE HTML>

DIVで囲まれている全てのimg要素には、CSSで定義されていないにもかかわらず、3pxの下余白があります。言い換えれば、その3pxの底部余白の原因となっているスタイル属性がないのです。

<div class="placeholder">
    <img alt="" src="/haha.jpg" />
</div>

さて、haha.jpg が 50x50 で、.placeholder が display: table に設定されているとします。不思議なことに、私の観測では .placeholder の高さ寸法は 50x53 です...。

どなたかこの異常に遭遇し、それを修正された方はいらっしゃいますか？

編集

以下は、JS FIDDLEです。

http://jsfiddle.net/fRpK6/

どのように解決するのですか？

この問題は、画像がテキストの文字のように動作する（そのため、"y" や "g" のぶら下がり部分がその下に残ってしまう）ために起こるもので、解決するには vertical-align CSS プロパティを使用して、そのようなスペースが不要であることを示すことで解決します。ほぼすべての値の vertical-align の値はほとんど何でも構いませんが、私が好きなのは middle が個人的には好きです。

img {
    vertical-align: middle;
}

jsFiddleです。 http://jsfiddle.net/fRpK6/1/

[解決済み] HTML 5 の奇妙な img は常に下部に 3px のマージンを追加する [重複] 。

質問

編集

どのように解決するのですか？

関連

[CSSチュートリアル】CSSのトリッキーなグラデーションで高度な背景光アニメーションの感覚を実現

[CSSチュートリアル】height:100%と書いても効かない理由

[CSSチュートリアル]css display table adaptive height, widthの問題解決

[CSSチュートリアル】新しいCSS:whereと:is擬似クラス関数とは？

[CSSチュートリアル】クールなネオン効果を実現するピュアCSS（デモあり）

[CSSレイアウト例】CSSで中央揃えを実現する方法N種

[CSSチュートリアル】CSSで実現できるのなら、わざわざJavaScriptを使う必要はない

[CSSチュートリアル】カラフルで知的なシャドウ効果を実現するCSS

[css3]CSS3は本当にSCSSに取って代わるのだろうか？

[css3]本のページをめくるような効果を実現するcss3サンプルコード

最新

nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)

htmlページでギリシャ文字を使うには

ピュアhtml+cssでの要素読み込み効果

純粋なhtml + cssで五輪を実現するサンプルコード

ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード

タイピング効果を実現するピュアhtml+css

htmlの選択ボックスのプレースホルダー作成に関する質問

html css3 伸縮しない画像表示効果

トップナビゲーションバーメニュー作成用HTML+CSS

html+css 実装サイバーパンク風ボタン

おすすめ

[CSSチュートリアル】overflow:hiddenの役割を解説（overflow hidden、clear float、外周マージンの崩れを解決する）。

[CSSチュートリアル】波動効果を生み出すCSSのアイデア

[css3]ピュアCSS3によるネオンライト効果

[css3]グレーモードやブラックモードを実現するCSS3フィルター（フィルター）サンプルコード（Webページ用

[CSSチュートリアル】子要素のmargin-topが親要素の移動を引き起こす問題解決

[CSSチュートリアル】background-positionプロパティのパーセンテージ値の使い方を探る

[ブラウザ互換性チュートリアル]IE9でのネイティブページの互換性問題の解決方法について

[CSSチュートリアル]ドラッグ＆ドロップ効果を実現するピュアCSSコード

[解決済み] div内の画像の下に余分なスペースがある

[解決済み】画像下の空白を削除する【重複あり