web-dev-qa-db-ja.com

CSSマージンテロ;マージンは親要素の外側にスペースを追加します

私のCSSマージンは、私が望むまたは期待する方法で動作しません。私のヘッダーのマージントップは、それを囲むdivタグに影響しているようです。

これは私が望んでいるものです： What I want....

...しかし、これは私が何をするかです： What I get...

出典：

<!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を使用し、Normalizer.cssでデフォルトのマージンを10pxに設定します。重要ではありませんが、主なポイントは次のとおりです。私はできません、するべきではありません、したくないh1-タグのマージンを変更しません。

他の質問と似ていると思います。 なぜこのCSSマージントップスタイルが機能しないのですか？。質問は、この特定の問題をどのように解決すればよいですか？

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

より良い、ベストプラクティス、解決策が必要ですか？これはかなり一般的なことです。

htmlcssoverflowmargin
117
jamietelin

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

jsFiddleの例

そして、 折りたたみマージン を確認してください。

176
j08691

次のルールのいずれかを追加します。

float: left/right;
position: absolute;
display: inline-block;
overflow: auto/scroll/hidden;
clear: left/right/both;

これはcollapsing marginsが原因です。この動作に関する記事を参照してください here 。

記事によると：

W3C仕様では、折りたたみマージンを次のように定義しています。

「この仕様では、マージンを折りたたむという表現は、2つ以上のボックス（隣り合っているか入れ子になっている可能性がある）の隣接するマージン（空ではないコンテンツ、パディング、ボーダーエリア、またはクリアランスがそれらを分離しない）が組み合わされて形成されることを意味します単一のマージン。」

これは、親子要素にも当てはまります。

すべての答えには、考えられる解決策の1つが含まれています。

要素のマージンが折りたたまれていない他の状況があります。

  • 浮遊要素
  • 絶対に配置された要素
  • インラインブロック要素
  • オーバーフローが可視以外に設定された要素（子でマージンを折りたたむことはありません。）
  • クリアされた要素（親ブロックの下マージンで上マージンを折りたたむことはありません。）
  • ルート要素
35
Ziarno

問題は、親が子供の身長を考慮していないことでした。 display:inline-block;を追加してくれました。

フルCSS

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

フィドルを参照

14
jonBreizh

他の答えの解決策は私にとってはうまくいきませんでした。透明な境界線、インラインブロックなどは、すべて他の問題を引き起こしました。代わりに、次のcssを祖先要素に追加しました。

parent::after{
  content: "";
  display: inline-block;
  clear: both;
}

状況によっては、最後の子要素の後に余分なスペースが追加されるため、独自の問題が発生する場合があります。

0
Trevor

border-top: 1px solid transparent;エレメントに#pageを追加するだけです。

0
Amid