CSS：消除主体边距

Question

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

浏览器的最顶部和“徽标”文本之间有空间。我的代码位于 jsbin 上。

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

Answer 1

某些 HTML 元素具有预定义的边距（即：body、h1 到 h6、p、 >fieldset、form、ul、ol、dl、dir >、菜单、块引用和dd）。

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

要解决此类问题，我建议使用浏览器的开发工具 。对于大多数浏览器：右键单击您想要了解更多信息的元素，然后选择“检查元素”。在“样式”选项卡的最底部，您有一个 CSS 盒子模型。这是一个很好的工具，可以可视化边框、内边距和边距以及哪些元素是您的样式问题的根源。

Answer 2

我想说，使用全局重置是解决这个问题的一个糟糕方法。

* {
  margin: 0;
  padding: 0;
}

h1边距从父级弹出的原因是父级没有内边距。

如果向 h1 的父元素添加内边距，则边距将位于父元素内部。

将所有内边距和边距重置为 0 可能会导致很多副作用。那么最好删除该特定标题的页边距。