我有四个div,一个在另一个下面,我不想要它们之间的空格。我试着写一些边距和填充,没有任何作用。没有边界,所以我不知道是什么造成了div之间的差距。
.logo {
background-color: blue;
height: 125px;
margin-right: 25%;
margin-left: 25%;
}
.nav {
margin-right: 25%;
margin-left: 25%;
}
.picture {
margin-right: 25%;
margin-left: 25%;
background: yellow;
height: 300px;
}
.aboutus {
margin-right: 25%;
margin-left: 25%;
background: blue;
height: 200px;
}

<body>
<div class="logo">
<p>logo</p>
</div>
<div class="nav">
<ul>
<li class="main"><a href="main.html">Domov</a></li>
<li class="gallery"><a class="active" href="gallery.html">Galéria</a></li>
<li class="contacts"><a href="contacts.html">Kontakt</a></li>
</ul>
</div>
<div class="picture">
<h1>picture</h1>
</div>
<div class="aboutus">
<h1>about us</h1>
</div>
</body>
&#13;
答案 0 :(得分:3)
乍一看,h1
标签正在添加空间,请尝试以下方法:
h1 {
margin: 0;
}
您还可以将div设置为overflow: auto;
,如果您希望将间距保持在h1
标记之上,则可以选择
.nav, .picture, .aboutus {
overflow:auto;
}
在此处详细了解折叠边距:Collapsing margins
答案 1 :(得分:-1)
答案 2 :(得分:-2)
您需要从h1和ul标签中删除默认边距
h1, ul{
margin: 0;
}
或者您可以使用https://meyerweb.com/eric/tools/css/reset/
等重置
.logo {
background-color: blue;
height: 125px;
margin-right: 25%;
margin-left: 25%;
}
.nav {
margin-right: 25%;
margin-left: 25%;
}
.picture {
margin-right: 25%;
margin-left: 25%;
background: yellow;
height: 300px;
}
.aboutus {
margin-right: 25%;
margin-left: 25%;
background: blue;
height: 200px;
}
h1, ul{
margin: 0;
}
&#13;
<body>
<div class="logo">
<p>logo</p>
</div>
<div class="nav">
<ul>
<li class="main"><a href="main.html">Domov</a></li>
<li class="gallery"><a class="active" href="gallery.html">Galéria</a></li>
<li class="contacts"><a href="contacts.html">Kontakt</a></li>
</ul>
</div>
<div class="picture">
<h1>picture</h1>
</div>
<div class="aboutus">
<h1>about us</h1>
</div>
</body>
&#13;