html – CSS – 如何清除元素之间不必要的边距？

发布时间：2020-12-14 21:43:38 所属栏目：资源来源：网络整理

导读：这似乎是一个常见的问题，但我发现的解决方案都没有为我工作。 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" pLorem ipsum dolor sit amet

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

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

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

为什么还有差距？

解决方法

这是由于以下原因：

Browsers automatically add some space (margin) before and after each <p> element. The margins can be modified with CSS (with the margin properties).

所以尝试：

p {
     margin: 0px;
}

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

>完全删除浏览器可能具有的任何默认样式。这是通过使用重置样式表来实现的。最流行的是Eric Meyer’s CSS Reset.如果你想全部出来，在任何浏览器中都有一个完全干净的开始，请使用Meyer的技术。该方法优于使用slow * {margin：0;填充：0; }复位方法(Read here why)
>将样式表规范化为您自己的默认值。网页设计师的一大烦恼是不同的浏览器使用不同的默认样式。然而，完全重置是重新定义所有元素的样式的耗时的麻烦。因此，您可以使用预定义的一组一致且合理的默认样式来规范浏览器的所有默认样式。通常的方法是使用normalize.css(Twitter，Github和SoundCloud使用这个！)
>在必要时调整默认值，或有意识地处理默认值。使用默认值最常用的方式(不是说最好的方法)是知道它们存在并在必要时进行调整。默认样式有一个原因：它们可以帮助开发人员快速获得它们的外观。看起来有点偏离吗？简单地调整样式。但是，请确保为正确的元素使用正确的标签。例如，不是删除< p> inline texts的边距，您应该使用< span>标签(无默认边距)

这应该可以帮助您了解幕后情况。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!