's automatically adding a gap/padding/margin when content is added 本文转载自 Minnen 查看原文 2013-03-17 5834 padding/

I made a simple site using stack-able divs inside of a wrapper div. The problem is that every time I add content to the , it suddenly adds a space of some type, and I cannot get rid of it. The content in the divs will be dynamic so the height won't be always the same.

我在包装器div中使用可堆叠的div创建了一个简单的站点。问题是,每次我添加内容时,它突然添加了某种类型的空间,我无法摆脱它。 div中的内容将是动态的,因此高度不会始终相同。

Why does this happen? Is it a problem the div or the content itself?

为什么会这样? div或内容本身是一个问题吗?

Image below the div's without content

没有内容的div下面的图像

Image below the div's with content

div下面的图片有内容

My 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; 
}

My 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>

3 个解决方案

#1

Looking at the CSS you provided, it seems that you are forgetting to normalize it. Add at the very least this to the top of your CSS file:

看看你提供的CSS,似乎你忘记了它的标准化。至少添加到CSS文件的顶部:

* { 
  margin: 0; 
  padding: 0; 
}

This will remove any browser specific margins or padding from elements, which may be causing the whitespace.

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

#2

There's also a css script called Normalize.css which makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing. You can download it from: http://necolas.github.com/normalize.css/

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

#3

for me I had the same issue with CSS NORMALIZER

对我来说,CSS NORMALIZER也有同样的问题

and I just add this css code to the main container:

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

border: 1px solid transparent;

seems to be working on all major browsers along with IEs except IE6 gives you a black border b'cause as you may know IE6 does not support TRANSPARENCY

似乎在所有主流浏览器和IE浏览器上工作,除了IE6给你一个黑色边框,因为你可能知道IE6不支持TRANSPARENCY

hope this helps :-)

希望这可以帮助 :-)

#1