gpt4 book ai didi

html - 为什么内部 div 顶部边距会带来它的包装 div 顶部边距

转载 作者:行者123 更新时间:2023-11-28 18:58:32 25 4
gpt4 key购买 nike

<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;
}

最佳答案

我不确定我是否理解您的问题,但您应该首先解决一些问题。

首先,您应该在设置任何样式之前使用 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 */
}

关于html - 为什么内部 div 顶部边距会带来它的包装 div 顶部边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6951425/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com