<div> 在添加内容时自动添加间隙/填充/边距答案

【问题标题】：<div>'s automatically adding a gap/padding/margin when content is added<div> 在添加内容时自动添加间隙/填充/边距
【发布时间】：2013-03-05 22:28:00
【问题描述】：

我在包装器div 中使用可堆叠的divs 创建了一个简单的站点。问题是每次我添加内容时，它都会突然添加某种类型的空间，我无法摆脱它。 divs 中的内容将是动态的，因此 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 吗？
@jimjimmy1995 我不知道那是什么，我用谷歌搜索了这个词，发现necolas.github.com/normalize.css是你说的吗？
基本上做一些类似* { margin: 0; padding: 0; }的事情，以删除浏览器特定的默认值。
检查您的内容文件是否未使用带有 BOM 的 UTF-8 编码。
查看此页面：cssreset.

标签： css html margin padding

【解决方案1】：

查看您提供的 CSS，您似乎忘记对其进行规范化。至少在 CSS 文件的顶部添加：

* { 
  margin: 0; 
  padding: 0; 
}

这将从元素中删除任何浏览器特定的边距或填充，这可能会导致空白。

【讨论】：

【解决方案2】：

还有一个名为 Normalize.css 的 css 脚本，它可以让浏览器更一致地呈现所有元素并符合现代标准。它仅针对需要规范化的样式。下载地址：http://necolas.github.com/normalize.css/

【讨论】：

【解决方案3】：

对我来说，CSS NORMALIZER 遇到了同样的问题

我只是将这个 css 代码添加到主容器中：

border: 1px solid transparent;

似乎在所有主要浏览器以及 IE 上都可以使用，除了 IE6 会为您提供黑色边框，因为您可能知道 IE6 不支持透明度

希望这会有所帮助:-)

【讨论】：

在我处理了我的页面并添加了更多内容之后，我意识到（jimjimmy1995）是你需要做的事情......因为否则你最终会拥有由于 BORDER 1PX SOLID，您网站的每个角落都有更多 1pxs...无论如何我希望我能解释清楚.. 感谢 (jimjimmy1995)