我在包装器 div 中使用可堆叠的 div 创建了一个简单的网站。问题是每次我向 中添加内容时，它都会突然添加某种类型的空格，而且我无法摆脱它。 div 中的内容将是动态的，因此 height 不会始终相同。
为什么会这样？ div 还是内容本身有问题？
div 下方的图片没有内容
div 下方的图片带有内容
我的 CSS
@charset "utf-8";
/* CSS Document */
/* Basic */
body {
background-color: #666;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#wrapper {
width: 900px;
height: auto;
margin: 10px auto;
position: relative;
background-color: #999;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 5px 18px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}
#header {
width: 900px;
height: 180px;
background-color: #9C0;
}
#menubar {
width: 900px;
height: 36px;
background-color: #906;
}
#content {
width: 900px;
height: 350px;
position: relative;
background-color: #036;
}
#footer {
width: 900px;
height: 40px;
position: relative;
background-color: #F90;
}
/* Nav */
#nav {
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
#nav li {
float: left;
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #000;
}
#nav li a:hover {
color: #000;
background-color: #fff;
}
我的 HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="menubar">
<ul id="nav" >
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
最佳答案
查看您提供的 CSS，您似乎忘记了对其进行规范化。至少将此添加到 CSS 文件的顶部:
* {
margin: 0;
padding: 0;
}
这将从元素中删除任何浏览器特定的边距或填充，这可能会导致空白。
关于css - <div> 在添加内容时自动添加间隙/填充/边距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15462367/