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>

CSS

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设置了背景颜色，以便我可以看到它们是否在触摸。这就是我的页面：

page example

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

为什么还有差距？

Answer 1

这是由于以下原因：

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

所以试试：

p {
     margin: 0px;
}

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

完全删除浏览器可能具有的所有默认样式。这是通过使用重置样式表来完成的。最受欢迎的是Eric Meyer’s CSS Reset。如果你想在任何浏览器中全力以赴并拥有完全干净的开始，请使用Meyer的技术。与使用慢*{ margin:0; padding:0; }重置方法（Read here why）
将样式表规范化为您自己的默认值。 Webdesigners的一大烦恼是不同的浏览器使用不同的默认样式。但是，完全重置会带来重新定义所有元素样式的耗时。因此，您可以使用一组预定义的一致且合理的默认样式来规范化浏览器的所有默认样式。常见的方法是使用normalize.css（ Twitter ， Github 和 SoundCloud 使用它！）
在必要时调整默认值或有意识地使用默认值。使用默认值的最常见方式（不是说它是最好的方法）是知道它们存在并在必要时进行调整。默认样式有一个原因：它们可以帮助开发人员快速获得他们所追求的外观。外观稍微偏了吗？只需相应调整样式即可。但是，请确保为正确的元素使用正确的标记。例如，您应该使用<p>代码（无默认<span>）

inline texts

margin

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

Answer 2

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

p {
   margin: 0;
}

或将溢出应用于您的div

div {
  overflow: hidden;
}

Answer 3

使用

*{
    padding:0;
    margin:0;
}

以你的风格

Answer 4

试试这个：

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

CSS

p{
   margin:0;           
}

OR

* {
margin:0;
padding:0;
}

Answer 5

添加此：

*{
    margin: 0;
    padding: 0;
}

Answer 6

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

p {
    margin: 0;
}

将解决此问题。

Answer 7

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

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

CSS - 如何删除元素之间不需要的边距？

HTML

CSS

7 个答案: