187

私の CSS マージンは、私が望むように、または期待どおりに動作しません。私のヘッダー margin-top は、それを囲む div タグに影響を与えるようです。

これは私が望んでいて期待しているものです： 私が欲しいもの....

...しかし、これは私が最終的にするものです: 私が得るもの...

ソース：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Margin test</title>

<style type="text/css">
body {
    margin:0;
}
#page {
    margin:0;
    background:#FF9;
}
#page_container {
    margin:0 20px;
}
h1 {
    margin:50px 0 0 0;
}
</style>

</head>

<body>

<div id="page">
    <div id="page_container">
        <header id="branding" role="banner">
            <hgroup>
                <h1 id="site-title"><span><a href="#" title="Title" rel="home">Title</a></span></h1>
                <h2 id="site-description">Description</h2>
            </hgroup>
        </header>
    </div>
</div>

この例ではマージンを誇張しています。h1-tag のデフォルトのブラウザー マージンはやや小さく、私の場合はTwitter Bootstrapを使用し、デフォルトのマージンを 10px に設定する Normalizer.css を使用しています。それほど重要ではありませんが、要点は次のとおりです。h1タグのマージンを変更することはできません。

他の質問と似ていると思います。この CSS margin-top スタイルが機能しないのはなぜですか? . 質問は、この特定の問題をどのように解決するのですか?

同様の問題に関するいくつかのスレッドを読みましたが、実際の回答と解決策は見つかりませんでした。padding:1px;問題を追加またはborder:1px;解決することを知っています。しかし、div タグにパディングや境界線を付けたくないので、それは新しい問題を追加するだけです。

より良い、ベスト プラクティス、ソリューションが必要ですか? これはかなり一般的なはずです。

4

8 に答える 8

251

divに追加overflow:autoします。#page

jsFiddle の例

そして、あなたがそれをしている間に、崩壊するマージンをチェックしてください.

于 2012-11-26T21:49:28.433 に答える
22

問題は、親が子供の身長を考慮に入れていなかったことです。追加するdisplay:inline-block;ことでそれができました。

フルCSS

#page {
    margin:0;
    background:#FF9;
    display:inline-block;
    width:100%;
}

フィドルを見る

于 2012-11-26T21:51:13.030 に答える
2

次のルールを追加します。

overflow: hidden;

これは、マージンの崩壊が原因です。この動作に関する記事は、こちら を参照してください。

記事によると：

親要素に上部パディングがない場合、または最初の子よりも上部マージンが少ない場合、要素は、親要素が子要素のマージンを持っているように見える方法でレンダリングされます。したがって、これはこれらの条件が満たされているページのどこでも発生する可能性がありますが、ページの上部で最も明白になる傾向があります.

于 2020-05-03T09:32:13.043 に答える
0 
#page {
overflow: hidden;
margin:0;
background:#FF9;
}
于 2020-05-03T11:52:36.893 に答える