删除CSS中元素之间的空白[重复]答案

【问题标题】：Removing white space between elements in CSS [duplicate]删除CSS中元素之间的空白[重复]
【发布时间】：2013-01-22 15:19:03
【问题描述】：

我做了这个简单的 3 部分 css 布局，但它的行为不应该。

CSS

#main-container {
    width: 1000;
    margin: 0 auto;
    height:100%;
}

.header{ 
    background-color:black; 
    width:100%; 
    height:150px;
}

.headertext{
    color:#A3BB02;
    font-size: xx-large;
}

.contenu{ 
    width:100%; 
    background-color:#A3BB02;  
    }

.footer{ 
    width:100%; 
    background-color:black; 
    min-height:100px; 
    }

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Intro Projet Cloud</title>
    <link href='/css/design.css' rel='stylesheet' type='text/css' />
  </head>

  <body>
    <div id="main-container">
        <div class="header">
            <br/><br/><br/>
            <span class="headertext">blablabla</span>
        </div>
        <div class="contenu">
            <p>
                blabla
            </p>
            <p>
                blabla
            </p>
            <p>
                blabla
            </p>
            <p>
                <a href="projetcloudm2">Acceder a l'application</a>
            </p>
        </div>
        <div class="footer"></div>
    </div>
  </body>
</html>

结果

contenu 与页眉和页脚之间的白条从何而来？ may css中没有边距。

请注意，这是通过 Eclipse 中的 google app 引擎进行 web 项目完成的

【问题讨论】：

标签： html css

【解决方案1】：

默认情况下，段落有一个边距（通常是 1em 0）。将此添加到您的样式中以重置它：

p {
  margin: 0;
}

见DEMO。

【讨论】：

否，见8.3 Margin properties，“初始值：0”
这些都是建议。 Chrome、Firefox、Safari 和 Opera 都为段落实现了默认的顶部和底部边距。
好的，看来我误解了 TR 中的“推荐”部分。虽然我没有看到 FF 16 (JSFiddle) 的差距。
这很可能是因为您在左侧选中了“标准化 CSS”，这会重置段落边距。

【解决方案2】：

您有一个触发 Quirks 模式的 Doctype。这会导致浏览器模仿古代浏览器中的错误：

破坏大量 CSS
使浏览器彼此不一致

使用触发标准模式的 Doctype。

由于您使用的是 HTML 4.01 Transitional，因此：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

（注意：HTML 4.01 Transitional 旨在将文档从 HTML 3.2 转换到 HTML 4.01。新页面应根据 HTML 4.01 Strict 或 HTML 5 草案编写。

您可能还有其他问题，但 Quirks 模式存在问题，因此在浏览器切换到标准模式之前不值得对其进行调查。

【讨论】：

你确定吗？因为使用你的模式会破坏我的 CSS。我的宽度：1000；不再工作（看起来像宽度：100％）
width: 1000 是无效的 CSS。 width 属性需要一个长度。长度（0 除外）必须有单位。必须忽略无效规则。（怪癖模式的一个特点是一些浏览器会不遵守规范并将无单位长度视为在px 中）。始终validate 你的 CSS。

【解决方案3】：

您看到的是默认样式。考虑实现a decent reset。

【讨论】：

【解决方案4】：

.contenu p { 
    margin: 0; 
    padding: 10px 0 10px 0
}

添加这个。这应该为您提供与现在相同的 p 之间的空间，但没有 div 之间的空格

【讨论】：