88

HTML/CSS/Javascript の実践に必要なさらに別のライトボックスを作成しようとしていますが、些細に見える (そしておそらくそうである!) スタイリングの問題に遭遇しましたが、解決できません。

をdiv含む がありimgます。何を試しても（border、、、自動高さなど）、画像の寸法に合わせて縮小することはできませmarginん。問題を次のように減らしました。paddingdiv

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
        <title>Layout experiments</title>

        <style type="text/css">
            #lightbox {
                margin: 0;
                padding: 0;
                position    : fixed;
                left        : 50%;
                margin-left : -320px;
                top         : 100px;
                border-radius: 22px;
                background  : #e0e0f0;
                color       : #102020;
            }

            #lightbox img {
                border-radius: 15px;
            }
            .imagebg {
                margin      : 7px;
                background  : black;
                border-radius: 15px;
                height      : 100%;
            }

        </style>

    </head>
    <body>

        <div id="lightbox">
            <div class="imagebg">
                <img src="picture.jpg">
            </div>
        </div>
    </body>
</html>

「picture.jpg」は 640x400 ですが、コンテナー div は 640x404 にする必要があり、その違いは画像の下に黒い帯として表示されます。div が存在するため、不透明度を 0 までブレンドしてイメージを黒にフェードし、スワップしてからブレンドし直すことができます。

複数のブラウザーで計算されたスタイルを見てきましたが、4px デルタがどこから来ているのかわかりません。

4

6 に答える 6

189

追加しようとしています：

img { display: block; }

あなたのCSSに。はデフォルトでインライン要素であるため<img>、その高さはデフォルトの line-height 値に関連して異なる方法で計算されます。

インライン要素では、CSS の line-height プロパティは、行ボックスの高さの計算に使用される高さを指定します。

ブロック レベルの要素では、line-height は、要素内の行ボックスの最小の高さを指定します。

ソース: https://developer.mozilla.org/en/CSS/line-height

于 2012-06-20T19:23:28.090 に答える
26

画像は親の行の高さを使用しています。これを試して：

.imagebg { line-height: 0 }
于 2012-06-20T19:24:29.737 に答える
-1

言及していませんが、基本的にはIEでこのエラーが発生していますが、これは事実です。IE は、<img>タグの下に余分なスペースを生成します。したがって、画像を作成することをお勧めしますimg { display: block; }。

編集：IEのバグだと言えます

于 2012-06-20T19:27:57.957 に答える
-3

display要素を変更したくない場合は、試してください

margin-bottom: -4px;
于 2016-10-03T06:59:38.637 に答える