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

私のCSSマージンは、私が望むやり方では動作しません。私はヘッダーマージントップがそれを取り巻くdivタグに影響を与えるように思えます。CSSマージンテロ;マージンは親要素の外側にスペースを追加します

これは私が欲しいものであると期待する： 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タグのデフォルトのブラウザマージンはいくぶん小さく、私の場合はTwitter BootstrapとNormalizer.cssを使ってデフォルトマージンを10pxに設定しています。それほど重要ではない、主なポイントは、私はできません、は、h1タグの余白を変更するしないでください。

私は他の質問に似ていると思います。 Why does this CSS margin-top style not work?。質問はどのように私はこの特定の問題を解決するのですか？

私は同様の問題でa few threadsを読んだことがありますが、実際の回答と解決策は見つかりませんでした。私はpadding:1px;またはborder:1px;を追加することで問題は解決することが分かっています。しかし、それは私のdivタグにパディングや境界線を必要としないので、新たな問題を追加するだけです。

もっと良い、ベストプラクティスのソリューションが必要ですか？これはかなり一般的でなければなりません。

出典

2012-11-26 jamietelin

はあなたが始めたのルート要素をCSSリセット？ –

私はNormalizer.cssを使用します。しかし、それは問題ではありません。私はh1タグを削除する場合。問題はない。問題は、私のh1タグにマージンが必要で、それが周囲の要素に影響を与えているということです。 – jamietelin

万が一[デモを投稿する]（http://jsfiddle.net/）できますか？ –

128

#page divにoverflow:autoを追加してください。

jsFiddle example

そして、あなたはそれでいる間collapsing marginsをチェックしてください。

出典

2012-11-26 21:49:28 j08691

これは機能します。ここでは例を見つけました（http://www.seifi.org/css/understanding-taming-collapsing-margins-in-css.html）。本当に100％満足する解決策はありません。しかし、私はちょうどそれと一緒に生きなければならないと思う、マージンはこの方法で動作する必要がありますか、テキストの書式は不可能です。必要に応じて動作する時間の99％。しかし、今はレイアウトを設計する際に問題が発生します。：P – jamietelin

オーバーフロー：隠し;また私のために働いて、私のシナリオで私のためにうまくいった。 – stuyam

問題は親が子供の高さを考慮していないことでした。私にはdisplay:inline-block;を追加しました。

のフルCSS

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

See Fiddle

出典

2012-11-26 21:51:13 jonBreizh

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

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

これはcollapsing marginsによって引き起こされます。この動作についての記事を参照してくださいhere。記事によれば

：

W3C仕様は次のように崩壊マージンを定義しています、

「を本明細書では、余白を崩壊発現がその隣接するマージン（NO空でないコンテンツ、パディング手段2つ以上のボックス（隣り合っていても入れ子になっていてもよい）を組み合わせて1つのマージンを形成することができます」。

これは親子の要素nts。

すべての答えは、可能な解決策の一つを含む：

要素が彼らのマージンを持っていない他の状況がありますが崩壊：

要素に

絶対配置要素

を浮かべインラインブロック要素

overflowがvisibl以外の要素に設定されている要素E（彼らは子供たちと一緒にマージンを崩壊しない。）

は要素をクリア（彼らは彼らの親ブロックの下の余白に自分のトップマージンを崩壊しない。）

出典

2017-02-06 14:09:15 Ziarno

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

答えて

関連する問題