所以我的问题基本上是我在页面上有3个div，而我的中间内容div总是与我的页眉和页脚div间隔大约50px。
为什么会发生这种分离？我没有在css文件中指定任何边距。
Amar编辑：这是css文件的代码：
@-webkit-keyframes showBody{
from { opacity: 0; }
to { opacity: 1; }
}
body { -webkit-animation: showBody 3s; position:relative; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#00CC00), to(#24C98D)); height: 100%; margin: 0; background-repeat: no-repeat;
background-attachment: fixed; }
#links li {list-style: none; display: inline; margin-right: 30px;}
a {text-decoration: none;}
#header { border-top-left-radius: 25px ; border-top-right-radius: 25px; background-color: #FFF; margin-top: 0px; margin-left: auto; margin-right: auto; width:1100px; height: 60px;border-top: 1px solid; border-left: 1px solid; border-right: 1px solid;}
#navmenu {height: 34px; width: auto; position: relative; left: 100px; top: -25px; }
#contentArea { background-color: #FFF; border-left: 1px solid; border-right: 1px solid; width: 1100px; margin-right: auto; margin-left: auto;}
#footer {border-bottom-left-radius: 20px 20px; border-bottom-right-radius: 20px 20px; background-color: #F00; margin-left: auto; margin-right: auto; width:1100px; height: 100px; border-left: 1px solid; border-right: 1px solid; border-bottom: 1px solid; }
#links {width: 1100px; background-color: #FFF; float: top; border-bottom: 1px solid;}
#links li {list-style: none; display: inline; margin-right: 30px;}
#copyrightinfo {width: 1100px; }
#navmenu {float: top; margin-top: 0px;}
#container {border-radius:
20px;}
以下是html文件的代码：
<!DOCTYPE html>
<html>
<head>
<link type="text/css" href="css/pagestyle.css" rel="stylesheet"/>
<link type="text/css" href="css/navmenustyle.css" rel="stylesheet" />
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
</div>
<div id="navmenu">
<ul id="frodoNav">
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="About">About</a></li>
<li><a href="#" title="Social">Social</a></li>
<li><a href="#" title="Reviews">Reviews</a></li>
<li><a href="#" title="Special Stories">Special Stories</a></li>
<li><a href="#" title="Travel With Kids">Travel With Kids</a></li>
<li><a href="#" title="Support">Support</a></li>
</ul>
</div>
</div>
<div id="contentArea" style="clear: both;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pharetra odio vel tellus tempus eget malesuada dui venenatis. In hac habitasse platea dictumst. Ut eu sagittis nisl. Nulla lacinia mattis turpis non tincidunt. Quisque sodales adipiscing libero et consectetur. Donec lectus lacus, consequat et consectetur non, iaculis a urna. Maecenas arcu lacus, luctus at gravida aliquet, varius ac purus. Curabitur varius sodales libero nec semper. Curabitur quis dolor a orci condimentum placerat. Sed sed ipsum nec metus tempus aliquam eu ut metus. Suspendisse arcu magna, dictum ut tristique quis, malesuada at lorem. Nam feugiat dolor quis mauris feugiat blandit.
Phasellus sed risus turpis, ut aliquam felis. Nullam auctor dictum tempor. Vivamus diam lectus, posuere eget viverra sit amet, condimentum nec augue. Pellentesque tellus lectus, scelerisque mollis viverra sit amet, ullamcorper id elit. Cras eu nisi a felis placerat pulvinar. Mauris sit amet ipsum leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Aliquam quis nulla nunc, quis pellentesque arcu. Proin nulla dolor, porta a malesuada ut, hendrerit eget velit. Ut vel molestie lectus. Nam volutpat scelerisque quam, a pharetra nibh cursus pellentesque. Duis ut magna imperdiet nibh gravida sodales vitae sit amet felis. Phasellus vitae velit lacus. Aenean a nisl ut est interdum cursus. Aliquam eu quam risus. Mauris sed nisi non justo tincidunt semper. Cras ornare porta elit, sed vulputate elit rhoncus quis. Aenean egestas metus vel leo pellentesque hendrerit. Suspendisse porta nulla nec erat sagittis vulputate. Fusce dui eros, imperdiet ut viverra ac, tempor ut tortor.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur non tristique urna. Fusce posuere enim ac nulla semper quis ultrices purus pulvinar. Aenean non eros et erat interdum dictum. Donec sodales porttitor est in lobortis. Proin tellus neque, commodo sed vulputate at, rutrum eget dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce feugiat laoreet orci eget euismod. Sed dui ipsum, sodales vitae egestas vel, feugiat a enim. Sed in pharetra odio. Mauris pretium, justo et porttitor semper, enim nulla aliquet erat, non imperdiet augue nisl ut nisi. Proin posuere, nunc non dictum faucibus, tortor massa dictum felis, ut pulvinar dolor erat ac diam. In mollis tincidunt nunc, ut luctus eros cursus at. Etiam pellentesque vehicula magna, sed bibendum sem convallis quis.
Donec sollicitudin, nulla non luctus vestibulum, dui mauris malesuada elit, nec pellentesque magna diam eget sapien. Suspendisse fermentum leo ut dolor adipiscing fringilla. Mauris in condimentum magna. Integer rutrum sem ut metus lacinia a tincidunt felis laoreet. Cras blandit, orci imperdiet tincidunt egestas, erat mauris mattis purus, quis ullamcorper massa urna at sapien. Pellentesque ornare velit mattis purus pretium congue tempor enim porta. Suspendisse ac feugiat ante. Nullam vel lectus sed magna consectetur molestie. Maecenas urna turpis, ultricies non lacinia in, porta vel lacus. Vivamus elit nisl, laoreet ut molestie blandit, vestibulum non arcu. Sed condimentum ante vitae diam ornare rutrum. Sed eget ipsum eu ante posuere placerat nec a orci. Integer ut arcu sit amet arcu eleifend tincidunt. Suspendisse eget pharetra enim.</p>
</div>
<div id="footer">
<div id="footer-nav">
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
我一直有这个问题，这是因为你的div之间的文本节点。将float：left添加到div中，浏览器应忽略文本节点。
答案 1 :(得分：0)
最好让代码可供我们查看。但是它可能在其他地方使用默认样式。您可以尝试将边距/填充设置为零。
答案 2 :(得分：0)
如果有人有兴趣，这是我对问题的解决方案。
html,
*
{
border : 0;
box-sizing : border-box;
margin : 0;
padding : 0;
}
@-webkit-keyframes showBody
{
from { opacity : 0; }
to { opacity : 1; }
}
a
{
text-decoration : none;
}
body
{
-webkit-animation : showBody 3s;
background-attachment : fixed;
background-image : -webkit-gradient(linear, 0% 0%, 0% 100%, from(#00CC00), to(#24C98D));
background-repeat : no-repeat;
height : 100%;
position : relative;
}
#container
{
border-radius : 20px;
}
#contentArea
{
background-color : #FFF;
border-left : 1px solid;
border-right : 1px solid;
clear : both;
margin-left : auto;
margin-right : auto;
width : 1100px;
}
#copyrightinfo
{
width : 1100px;
}
#footer
{
background-color : #F00;
border-bottom : 1px solid;
border-bottom-left-radius : 20px 20px;
border-bottom-right-radius : 20px 20px;
border-left : 1px solid;
border-right : 1px solid;
height : 100px;
margin-left : auto;
margin-right : auto;
width : 1100px;
}
#header
{
background-color : #FFF;
border-bottom : 1px solid;
border-left : 1px solid;
border-right : 1px solid;
border-top : 1px solid;
border-top-left-radius : 25px;
border-top-right-radius : 25px;
height : 60px;
margin-left : auto;
margin-right : auto;
text-align : center;
width : 1100px;
}
#header:before
{
content : '';
display : inline-block;
height : 100%;
vertical-align : middle;
}
#links
{
background-color : #FFF;
border-bottom : 1px solid;
float : top;
width : 1100px;
}
.menu-item
{
display : block;
float : left;
margin-left : 30px;
margin-right : 30px;
}
#navmenu
{
display : inline-block;
vertical-align : middle;
}<!DOCTYPE html>
<html>
<head>
<link href = "css/Example.css"
rel = "stylesheet"
type = "text/css"
/>
</head>
<body>
<div id = "container">
<div id = "header">
<div id = "navmenu">
<div class = "menu-item"><a href = "#" title = "Home">Home</a></div>
<div class = "menu-item"><a href = "#" title = "About">About</a></div>
<div class = "menu-item"><a href = "#" title = "Social">Social</a></div>
<div class = "menu-item"><a href = "#" title = "Reviews">Reviews</a></div>
<div class = "menu-item"><a href = "#" title = "Special Stories">Special Stories</a></div>
<div class = "menu-item"><a href = "#" title = "Travel With Kids">Travel With Kids</a></div>
<div class = "menu-item"><a href = "#" title = "Support">Support</a></div>
</div>
</div>
<div id = "contentArea">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pharetra odio vel tellus tempus eget malesuada dui venenatis. In hac habitasse platea dictumst. Ut eu sagittis nisl. Nulla lacinia mattis turpis non tincidunt. Quisque sodales adipiscing libero et consectetur. Donec lectus lacus, consequat et consectetur non, iaculis a urna. Maecenas arcu lacus, luctus at gravida aliquet, varius ac purus. Curabitur varius sodales libero nec semper. Curabitur quis dolor a orci condimentum placerat. Sed sed ipsum nec metus tempus aliquam eu ut metus. Suspendisse arcu magna, dictum ut tristique quis, malesuada at lorem. Nam feugiat dolor quis mauris feugiat blandit.
Phasellus sed risus turpis, ut aliquam felis. Nullam auctor dictum tempor. Vivamus diam lectus, posuere eget viverra sit amet, condimentum nec augue. Pellentesque tellus lectus, scelerisque mollis viverra sit amet, ullamcorper id elit. Cras eu nisi a felis placerat pulvinar. Mauris sit amet ipsum leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Aliquam quis nulla nunc, quis pellentesque arcu. Proin nulla dolor, porta a malesuada ut, hendrerit eget velit. Ut vel molestie lectus. Nam volutpat scelerisque quam, a pharetra nibh cursus pellentesque. Duis ut magna imperdiet nibh gravida sodales vitae sit amet felis. Phasellus vitae velit lacus. Aenean a nisl ut est interdum cursus. Aliquam eu quam risus. Mauris sed nisi non justo tincidunt semper. Cras ornare porta elit, sed vulputate elit rhoncus quis. Aenean egestas metus vel leo pellentesque hendrerit. Suspendisse porta nulla nec erat sagittis vulputate. Fusce dui eros, imperdiet ut viverra ac, tempor ut tortor.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur non tristique urna. Fusce posuere enim ac nulla semper quis ultrices purus pulvinar. Aenean non eros et erat interdum dictum. Donec sodales porttitor est in lobortis. Proin tellus neque, commodo sed vulputate at, rutrum eget dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce feugiat laoreet orci eget euismod. Sed dui ipsum, sodales vitae egestas vel, feugiat a enim. Sed in pharetra odio. Mauris pretium, justo et porttitor semper, enim nulla aliquet erat, non imperdiet augue nisl ut nisi. Proin posuere, nunc non dictum faucibus, tortor massa dictum felis, ut pulvinar dolor erat ac diam. In mollis tincidunt nunc, ut luctus eros cursus at. Etiam pellentesque vehicula magna, sed bibendum sem convallis quis.
Donec sollicitudin, nulla non luctus vestibulum, dui mauris malesuada elit, nec pellentesque magna diam eget sapien. Suspendisse fermentum leo ut dolor adipiscing fringilla. Mauris in condimentum magna. Integer rutrum sem ut metus lacinia a tincidunt felis laoreet. Cras blandit, orci imperdiet tincidunt egestas, erat mauris mattis purus, quis ullamcorper massa urna at sapien. Pellentesque ornare velit mattis purus pretium congue tempor enim porta. Suspendisse ac feugiat ante. Nullam vel lectus sed magna consectetur molestie. Maecenas urna turpis, ultricies non lacinia in, porta vel lacus. Vivamus elit nisl, laoreet ut molestie blandit, vestibulum non arcu. Sed condimentum ante vitae diam ornare rutrum. Sed eget ipsum eu ante posuere placerat nec a orci. Integer ut arcu sit amet arcu eleifend tincidunt. Suspendisse eget pharetra enim.</p>
</div>
<div id = "footer">
<div id = "footer-nav">
</div>
</div>
</body>
</html>
通过将以下代码插入CSS文件来解决div的间距问题...
*
{
border : 0;
box-sizing : border-box;
margin : 0;
padding : 0;
}
仅使用*对所有元素应用这些样式。通过将所有元素的border，margin和padding属性设置为0，然后在id或class中覆盖该值如果需要，您可以防止发生border，margin和/或padding的不必要的默认事件，例如此处的主要问题。
此处使用的行box-sizing : border-box;为该元素的border中的每个元素添加了所有margin，padding和width定义，从而制定了页面简单得多。
我还将列表（li）替换为多个div，这使得开发菜单变得更加容易。列表适用于呈现文本列表，特别是当您想要一些简单的公告时，但它们不适合呈现其他组项目，无论是文本还是其他方式。对于其他群组，请改用div。
我将菜单项放在包含div navmenu的内容中，并将它们水平居中。然后，我使用How to vertically center content with variable height within a div?的Fadi解决方案版本将它们垂直居中。
我还从CSS文件中删除了一些冗余/重复代码，将style从HTML文件移动到CSS文件，并改进了文件的总体布局和显示。
如果您有任何意见或问题，请随时制作。