CSS

【问题标题】：CSS - How to remove unwanted margin between elements?CSS - 如何删除元素之间不需要的边距？
【发布时间】：2013-08-01 01:32:16
【问题描述】：

这似乎是一个常见问题，但我找到的解决方案都没有为我工作。

HTML

<html>
    <head>
        <link rel="stylesheet" href="c/lasrs.css" type="text/css" />
    </head>
    <body>
        <div class="header">
            <img src="i/header1.png">
        </div>
        <div class="content">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. 
               Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, 
               massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, 
               bibendum at, posuere sit amet, nibh.</p>
        </div>
    </body>
</html>

body {
    min-width: 950px;
    background-color: #FFFFFF;
    color: #333333;
}

.header {
    width: 950px;
    height: 171px;
    margin: 0px auto;
    padding: 0px;
    background-color: #CCCCCC;
    position: relative;
}

.content {
    width: 950px;
    margin: 0px auto;
    padding: 0px;
    background-color: #E3EEF9;
    position: relative;
}

我故意破坏了图像路径并为.header div 设置了背景颜色，以便我可以看到它们是否在触摸。这是我的页面的样子：

如您所见，我已尝试将 divs 上的填充和边距设置为 0。

为什么还有差距？

【问题讨论】：

你必须reset你的CSS。
它叫collapsing-margins

标签： html css margin

【解决方案1】：

这是由于以下原因：

浏览器会在每个<p> 元素前后自动添加一些空格（边距）。可以使用 CSS 修改边距（使用边距属性）。

那就试试吧：

p {
     margin: 0px;
}

注意：浏览器也会在其他元素上添加默认样式！这在不同情况下既有用又烦人。有三种方法可以解决这个问题：

完全删除浏览器可能具有的所有默认样式。这是通过使用重置样式表来完成的。最受欢迎的是Eric Meyer’s CSS Reset。如果您想全力以赴并在任何浏览器中完全干净地开始，请使用 Meyer 的技术。此方法优于使用慢速 *{ margin:0; padding:0; } 重置方法 (Read here why)
将样式表标准化为您自己的默认值。网页设计师的一大烦恼是不同的浏览器使用不同的默认样式。但是，完全重置会带来重新定义所有元素样式的耗时麻烦。因此，您可以通过使用一组预定义的一致且合理的默认样式规范化浏览器的所有默认样式。常用的方法是为此使用normalize.css（Twitter、Github 和 SoundCloud 使用这个！）
必要时调整默认值或有意识地绕过默认值。使用默认值的最常见方式（并不是说这是最好的方式）是知道它们存在并在必要时调整它们。默认样式的存在是有原因的：它们可以帮助开发人员快速获得他们想要的外观。眼神是不是有点不对劲？只需相应地调整样式。但是，请确保为正确的元素使用正确的标签。例如，不要删除inline texts 的<p> 边距，而应使用<span> 标签（无默认margin）

这应该可以帮助您了解幕后发生的事情。

【讨论】：

谢谢！现在我知道是什么导致了问题，我可以找到一个不涉及从
标签中删除边距的解决方案。
严格来说，并不是“浏览器自动添加”的东西，只是浏览器内置的默认样式表，通常有p { margin-top: 1em; margin-bottom: 1em; }（w3.org/TR/html5/rendering.html#flow-content-0）。这些默认边距collapse with their containers margins 根据 CSS 规范。
@Jean-Paul，可能。但我认为“添加”意味着以前不存在的东西（例如浏览器 add html、body 和 tbody 元素，即使标记中没有这样的标签），但默认 CSS 已经存在，这就是为什么需要 CSS 重置的原因...
谢谢！我知道
标签有一个默认边距，但我不知道它可以延伸到父 div 的宽度/高度之外。我已经为此困惑了一个小时，哈哈。 +1
为未来的读者。 “p”得到了我所有的，除了一个。 h2 {边距：0；一个“H2”得到了我！但是这个答案让我成功了 99%。谢谢。

【解决方案2】：

段落中的边距溢出 div（这是正常的），您可以设置

p {
   margin: 0;
}

或将溢出隐藏应用到您的 div

div {
  overflow: hidden;
}

【讨论】：

【解决方案3】：

试试这个：

http://jsfiddle.net/JKS3k/3/

CSS

p{
   margin:0;           
}

或

* {
margin:0;
padding:0;
}

【讨论】：

【解决方案4】：

尝试使用一些重置 css，因为所有浏览器都带有一些默认样式链接边距、填充、行高、字体样式，您需要从非样式元素开始。

我建议使用 Eric Meyer 重置 CSS (http://meyerweb.com/eric/tools/css/reset/)

【讨论】：

【解决方案5】：

两个 div 都令人感动。默认情况下，DIV 的边距/填充始终为 0，因此您的修改无效。 <p> 但是确实有边距，并且由于它嵌套在 div 中，看起来 div 有一个填充。

p {
    margin: 0;
}

会解决这个问题。

【讨论】：

不完全正确。在某些情况下（包括这个）嵌套元素的边距会导致父元素自身移动，因为margin collapsing。所以段落之间的边距成为包含它们的divs 之间的真正边距。
感谢@IlyaStreltsyn，我知道现有的边距崩溃，但我不知道这个可怕想法的程度。 :)

【解决方案6】：

添加这个：

*{
    margin: 0;
    padding: 0;
}

【讨论】：

【解决方案7】：

使用

*{
    padding:0;
    margin:0;
}

你的风格

【讨论】：

这对于测试来说可能很好，但它绝对不是生产的最佳解决方案。一些元素，如表单控件，零填充看起来很糟糕，但默认其他样式。