Question

我制作了这个简单的3部分css布局，但它的表现并不像它应该的那样。

CSS

#main-container {
    width: 1000;
    margin: 0 auto;
    height:100%;
}

.header{ 
    background-color:black; 
    width:100%; 
    height:150px;
}

.headertext{
    color:#A3BB02;
    font-size: xx-large;
}

.contenu{ 
    width:100%; 
    background-color:#A3BB02;  
    }

.footer{ 
    width:100%; 
    background-color:black; 
    min-height:100px; 
    }

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Intro Projet Cloud</title>
    <link href='/css/design.css' rel='stylesheet' type='text/css' />
  </head>

  <body>
    <div id="main-container">
        <div class="header">
            <br/><br/><br/>
            <span class="headertext">blablabla</span>
        </div>
        <div class="contenu">
            <p>
                blabla
            </p>
            <p>
                blabla
            </p>
            <p>
                blabla
            </p>
            <p>
                <a href="projetcloudm2">Acceder a l'application</a>
            </p>
        </div>
        <div class="footer"></div>
    </div>
  </body>
</html>

结果 result

contenu和页眉和页脚之间的白条从哪里来？ may css中没有保证金。

请注意，这是通过eclipse执行网络项目中的谷歌应用引擎来完成的

Answer 1

默认情况下，段落有一个余量（通常为1em 0）。将其添加到您的样式以重置它：

p {
  margin: 0;
}

请参阅DEMO。

Answer 2

您有一个触发Quirks模式的Doctype。这会导致浏览器模拟古代浏览器中的错误：

打破了很多CSS
使浏览器彼此不稳定

使用触发标准模式的Doctype。

由于您使用的是HTML 4.01 Transitional：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

（注意：HTML 4.01 Transitional旨在将文档从HTML 3.2转换为HTML 4.01时使用。应根据HTML 4.01 Strict或HTML 5草案编写新页面。

您可能还有其他问题，但Quirks模式存在问题，因此在浏览器切换到标准模式之前不值得研究它们。

Answer 3

您所看到的是默认样式。考虑实施a decent reset。

Answer 4

.contenu p { 
    margin: 0; 
    padding: 10px 0 10px 0
}

添加此内容。这应该给你在p之间的空间与现在相同，但没有div之间的空白

删除CSS中元素之间的空白区域

4 个答案: