爲什麼內部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可能是最常用的一種或另一種形式。

其次，您的格式不正確，可能會導致奇怪的問題。

這裏是清理代碼以最小復位：

<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頂邊距

回答

相關問題