删除CSS中的正文边距

Question

我是网络开发的新手,在删除身体边缘时遇到了问题.

浏览器顶部和"徽标"文本之间有空格.我的代码在jsbin上.

body { margin: 0;}如果我想删除这个空间是错的？

Answer 1

我会说使用:

* {
  margin: 0;
  padding: 0;
}

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

h1边距弹出父节点的原因是父节点没有填充.

如果向h1的父元素添加填充,则边距将位于父元素内.

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

您必须做更多的工作才能将边距和/或填充重新应用到您想要的元素（您可以完全控制，但您必须做更多的工作）。当然，所有这些都是编码人员的偏好，但对我来说，我更喜欢“normalize.css”而不是“reset.css”。 (2认同)

Answer 2

h1您的标签仍有余量

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

h1 {
 margin-top:0;
}

Answer 3

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

h1 {
 margin-top:0;
}

Answer 4

一些HTML元素具有预定义的余量(即:body,h1到h6,p,fieldset,form,ul,ol,dl,dir,menu,blockquote和dd).

在你的情况下,这是h1导致你的问题.它{ margin: .67em }默认有.如果将其设置为0,则会删除空格.

为了解决这些问题,我建议使用浏览器的开发工具.对于大多数浏览器:右键单击要了解更多信息的元素,然后选择"检查元素".在"样式"选项卡的最底部,您有一个CSS框模型.这是一个很好的工具,用于可视化边框,填充和边距以及哪些元素是您造型头痛的根源.

Answer 5

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

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

h1 {
        margin-top: 0px;
    }

Answer 6

我建议您在使用以下内容编写 css 之前重置所有 HTML 元素：

* {
    margin: 0;
    padding: 0;
}

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