删除CSS中元素之间的空白区域
我制作了这个简单的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>
结果
contenu和页眉和页脚之间的白条从何而来？may css中没有余量.
请注意,这是通过eclipse中的google app引擎完成的
默认情况下,段落有一个余量(通常为1em 0).将其添加到您的样式以重置它:
p {
margin: 0;
}
见DEMO.