在CSS中去除页面边距

Question

在CSS中去除页面边距

htmlcssmarginspace

58

我对Web开发还不熟悉，在尝试移除body边距时遇到了问题。浏览器顶部和“logo”文本之间有空隙。代码在这里。如果我想要移除这个空隙，使用body { margin: 0;}是错误的吗？

- chenghuayang

1

https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing - Vitorino fernandes

10个回答

13

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

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

通常解决这类问题，我推荐使用浏览器的开发工具。对于大多数浏览器：右键单击要了解更多信息的元素，然后选择“检查元素”。在“样式”选项卡中，在最底部，您有一个CSS框模型。这是一个很好的工具，可以显示边框、填充和边距以及哪些元素是您样式方面的难题的根源。

- Björn Helgeson

12

在编写CSS之前，我建议您重置所有HTML元素，方法如下：

* {
    margin: 0;
    padding: 0;
}

之后，您可以毫无问题地编写自定义 CSS。

- Spawn

1

这是一种笨拙且有问题的方法。它需要对段落、列表等进行后续重新排版。这并不是必要的。 - isherwood

6

你的 h1 标签还存在边距，需要像这样移除:

h1 {
 margin-top:0;
}

- CᴴᵁᴮᴮʸNᴵᴺᴶᴬ

6

问题出在 h1 标题的外边距上。您可以尝试以下方法：

h1 {
 margin-top:0;
}

- Rahul Tripathi

5

这应该可以帮助您消除正文边距和<h1>标签的默认顶部边距。

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

h1 {
        margin-top: 0px;
    }

- Mladen Oršolić

3

只需在 CSS 中应用顶部，即可删除浏览器默认的 margin 和 padding。请注意保留 HTML 标签。

<style>

* {
  margin: 0;
  padding: 0;
}

</style>

注意:

在编写 CSS 前尝试重置所有的 HTML 元素。

或者 [ 在您的情况下使用此方法 ]

<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>

- RïshïKêsh Kümar

1

您可以使用body或*将margin和padding设置为0px;

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

- Vinayak

1

这个问题的正确答案是"CSS重置"。

* {
    margin: 0;
    padding: 0;
}

它会消除页面中每个对象的默认边距和内边距，无论使用什么浏览器。

- Darian

0

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

但是事实证明有一个简单的解决方法。您只需要给您的HEADER标签添加1像素的边框，并将BODY MARGIN设置为零，如下所示。

body { margin:0px; }

header { border:1px black solid; }

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

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

- wardheed

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- andeersg · Accepted Answer

我认为使用全局重置来解决这个问题是一种不好的方式。

* {
  margin: 0;
  padding: 0;
}

标签的 margin 超出父元素的原因是父元素没有 padding。

如果您为 h1 的父元素添加 padding，则 margin 将在父元素内部。

将所有 padding 和 margin 重置为 0 可能会导致许多副作用。因此最好删除此特定标题的 margin-top。