在 CSS 中删除正文边距

Question

我是网络开发的新手，在删除正文边距时遇到了问题。

在浏览器的最顶部和 "logo" 文本之间有 space。我的代码是 here on jsbin.

如果我想删除 space，body { margin: 0;} 是否错误？

Answer 1

您的 h1 标签还有保证金

所以你需要像这样删除它：

h1 {
 margin-top:0;
}

Answer 2

问题出在 h1 页眉边距上。你需要试试这个：

h1 {
 margin-top:0;
}

Answer 3

这应该可以帮助您摆脱 <h1> 标签的正文边距和默认上边距

body{
        margin: 0px;
        padding: 0px;
    }

h1 {
        margin-top: 0px;
    }

Answer 4

我建议您在编写 css 之前重置所有 HTML 元素：

* {
    margin: 0;
    padding: 0;
}

之后，您可以编写您的自定义 css，没有任何问题。

Answer 5

您可以使用 body 或 * 使 margin 和 padding 为 0px；

*{
margin: 0px;
padding:0px;
}

Answer 6

这道题的正确答案是"css reset"。

* {
    margin: 0;
    padding: 0;
}

它删除了页面上每个对象的所有默认边距和填充，没有任何限制，无论浏览器如何。

Answer 7

我会说使用：

* {
  margin: 0;
  padding: 0;
}

解决这个问题的方法很糟糕。

h1 边距从 parent 中弹出的原因是 parent 没有填充。

如果您向 h1 的 parent 元素添加填充，则边距将位于 parent.

内

将所有填充和边距重置为 0 会导致很多副作用。那么最好删除此特定标题的 margin-top。

Answer 8

一些 HTML 元素有预定义的边距（即：body、h1 到 h6、p、fieldset、form、ul、ol、dl、dir、menu、blockquote 和 dd).

在您的情况下，是 h1 导致了您的问题。它默认有 { margin: .67em }。如果将其设置为 0，它将删除 space.

要解决此类问题，我建议使用浏览器的 dev tools。对于大多数浏览器：右键单击您想了解更多信息的元素和 select "Inspect Element"。在 "Styles" 选项卡的最底部，您有一个 CSS 盒子模型。这是一款非常棒的工具，可用于可视化边框、填充和边距，以及哪些元素是令您头疼的样式问题的根源。

Answer 9

我发现即使将 BODY MARGIN 设置为零，这个问题仍然存在。

然而事实证明有一个简单的修复方法。您需要做的就是给您的 HEADER 标签一个 1px 的边框，并将 BODY MARGIN 设置为零，如下所示。

body { margin:0px; }

header { border:1px black solid; }

您可能还需要将 HEADER div 中的任何 H1、H2 等元素的边距更改为零。这将消除任何可能显示在文本周围的额外 space。

不确定为什么会这样，但我使用 Chrome 浏览器。显然，您还可以更改边框的颜色以匹配您的 header 颜色。

Answer 10

Just Remove The Browser Default Margin and Padding Apply Top Of Your Css.

<style>

* {
  margin: 0;
  padding: 0;
}

</style>

NOTE:

在写入 css 之前尝试重置所有 html elements。

或 [Use This In Your Case]

<style>

  *{
        margin: 0px;
        padding: 0px;
    }

h1 {
        margin-top: 0px;
    }

</style>

演示：

<style>

  *{
        margin: 0px;
        padding: 0px;
    }

h1 {
        margin-top: 0px;
    }

</style>

<html>
 <head>
 </head>
 <body>
  <h1>logo</h1>
 </body>
</html>

在 CSS 中删除正文边距

Removing body margin in CSS

html

css

margin

space