ホームページ > 記事 > ウェブフロントエンド > div ブロックが div block_html/css_WEB-ITnose にネストされている場合、親ブロック div が沈むのはなぜですか
div ブロックが div block_html/css_WEB-ITnose にネストされている場合、親ブロック div が沈むのはなぜですか
- WBOYオリジナル
- 2016-06-24 12:08:351735ブラウズ
コードを直接入力してください:
<style>body{ margin:0; padding:0;}#header{ height:100px; width:100%; margin-top:0; padding:0; background:#999;}#header #titletext{ margin-top:20px; margin-left:40px; padding:0;}#header #titletext #h5{ }#content{ }</style></head><body> <div id="header"> <div id="titletext"> <h5>XXX系统</h5> </div> </div> <div id="content"> </div> <div id="footer"> </div></body> 私の意図はそのような効果を与えることでした
しかし結果はそのような効果でした
ヘッダーに空白領域がある理由がわかりません。どの属性を間違って書いたのでしょうか?
ディスカッションに返信 (解決策)
Position:absolute;
これを追加
#header #titletext{position:absolute; margin-top:20px; margin-left:40px; padding:0;} 垂直マージンの圧縮
以下を検討してください: #titletext{margin-top:20px;} を削除します
#header をリセット{padding-top:20px;}
#header #titletext{
margin-top:20px; margin-left:40px;
<style type="text/css">body{ margin:0; padding:0;}#header{ height:100px; width:100%; margin-top:0; padding:0; background:#999; padding-top:20px;/*加上*/}#header #titletext{ /*注释掉margin-top:20px;*/ margin-left:40px; padding:0;}#header #titletext h5{/*这里的h5是标签选择器才对，因为你并没在HTML中为H5定义ID，所以不能加#*/ margin:0; padding:0;}#content{ }</style>
これは変更できますが、かなり面倒です
次のことをお勧めします
1. スタイルを記述する前にすべての要素をリセットします。 *{margin:0; padding:0}
2. 次に、パディングを使用できる場合は、マージンは必要ありません。たとえば、titletext 要素にマージンを使用しない場合は、親のパディングを使用するだけです。 #header 要素を追加すると、正常に表示されます。
3. さらに、h5 は上下のマージンを持つタイトルタグです。最初に 0 にリセットする必要があります。
ハハ、簡単な解決策があります。ヘッダーに「border:1px Solid #999」スタイルを追加するだけです
#header{
height:100px
width:100%;
margin-top:0;
padding :0;
background:#999;
ID ヘッダーに overflow:hidden; を追加します。すべての要素にpadding:0を適用します
ブラウザごとにデフォルトですべての要素のマージンとパディングが異なるため、0にリセットしないと互換性を調整すると問題が発生します
CSS2.1 標準のセクション 8.3.1 への次の参照を参照してください:
要素に上枠がない場合、フロー内ブロック要素の上マージンは、最初のフロー内ブロックレベルの子の上マージンと折り合います。上部のパディングがなく、子にはクリアランスがありません。
中国語に翻訳すると、次のようになります。
コードでは、h5 のデフォルトのマージンは 22、titletext のマージンは 20 です。これら 2 つはマージンの縮小を受けます。結果は、titletext の上マージンは 22 になります。
次に、タイトルテキストはヘッダーとマージン折りたたみを実行します。その結果、ヘッダーの上マージンは 22 になります。
次に、ヘッダーはボディとマージン折りたたみを実行します。結果は、ボディの上マージンは 22 になります。
したがって、実際にはヘッダーとボディの両方に幅 22 の上部マージンがあり、マージンは背景色で描画されません。
分かりますか？ 。 。 。 。
修正方法、
ヘッダーにボーダーやパディングを追加します。