なぜ内側のdivの上端余白はラッパーdivの上端余白になるのですか

<body> 
<div id = "wrapper"> 
    <div id = "video"> 
    </div> 
</div> 
<div id = "footer"> 
    <div id = "footercontent"> 
    </div> 
</div> 
</body> 

* 
{ 
margin:  0px; 
padding: 0px; 
} 

.selfclear:after 
{ 
    content:    "."; 
float:     left; 
    display:    block; 
    height:     0; 
    clear:     both; 
    visibility:    hidden; 
} 

html, body 
{ 
height: 100%; 
} 

#wrapper  
{ 
min-height:   100%; 
height:    auto !important; 
height:    100%; 
margin:    0 auto -343px; /* the bottom margin is the negative value of the footer's height */ 
width:    100%; 
background:   url("images/landing_page_bg.png"); 
} 

#video 
{ 
    width:    940px; 
    height:    530px; 
    background:   black; 
    margin-left:  auto; 
    margin-right:  auto; 
    margin-top:  100px; 
} 

#footer 
{ 
height:    343px; /* .push must be the same height as .footer */ 
background:   url("images/Landing_page_Footer.png")no-repeat; 
background-size: 100%; 
background-color: black;  
width:    100%; 
} 
#footercontent 
{ 
    height:   100%; 

    width:   1920px; 
    margin-left: auto; 
    margin-right: auto; 
}

出典

2011-08-05 dave

あなたは、あなたの質問にCSSを再フォーマットする必要があります。ここでは

は、最小限のリセットとクリーンアップコードです。現時点では、その一部だけが正しくフォーマットされています。 – Dan

私はあなたの質問を理解することはできませんが、まず取り組むべきことがいくつかあります。

まず、スタイルを設定する前にCSSリセットを使用する必要があります。 Eric Myers' Resetは、おそらく最も一般的には、1つの形式または別の形で使用されます。

第2に、書式設定が間違っているため、奇妙な問題が発生することがあります。

<body> 
    <div id="wrapper"> 
     <div id="video"> 
     </div> 
    </div> 
    <div id="footer"> 
     <div id="footercontent"> 
     </div> 
    </div> 
</body> 

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video 
{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;} 

* {-webkit-font-smoothing: subpixel-antialiased !important; text-rendering:optimizeLegibility;}  
html {height:100%;} 


.selfclear:after { /* not sure what this is being used for */ 
    content: "."; 
    float: left; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
    } 

#wrapper { 
    width: 100%; 
    height: auto !important; 
    margin-bottom: -343px; /* the bottom margin is the negative value of the footer's height */ 
    /* Are you wanting for the footer to be pulled up and overlap your wrapper DIV? */ 
    background: url('images/landing_page_bg.png') no-repeat 0 0; 
    } 

#video { 
    width: 940px; 
    height: 530px; 
    margin: 100px auto 0 auto; /* You can include all margins in a shorthand statement ~ TOP RIGHT BOTTOM LEFT */ 
    background: black; 
    } 

#footer { 
    width: 100%; 
    height: 343px; /* .push must be the same height as .footer */ 
    background: url('images/Landing_page_Footer.png') no-repeat 0 0; 
    /* background-size is NOT VALID or needed. Set the size of the container and repeat or no-repeat accordingly - background-size: 100%; */ 
    background-color: black;  
    } 

#footercontent { 
    width: 1920px; 
    height: 100%; 
    margin:0 auto; /* shorthand again TOP/BOTTOM LEFT/RIGHT */ 
    }

出典

2011-08-05 09:53:48

なぜ内側のdivの上端余白はラッパーdivの上端余白になるのですか

答えて

関連する問題