为什么不是 `body { margin: 0; }` 删除我的徽标的上边距？

排查 CSS 中的边距移除问题

当在 Web 开发中遇到边距问题时，新手程序员可能会想知道以下 CSS 规则是否合适：

body {
  margin: 0;
}

问题声明

应用上述代码来消除浏览器顶部和“logo”文本之间的间距被证明是不成功的。 jsbin 上有以下代码可供参考：

  <style>
    body {
      margin: 0;
    }
  </style>



  <div class="logo">
    <h1 id="Logo">Logo</h1>
  </div>

答案

虽然提供的 CSS 规则旨在删除 body 的边距，但它可能不是这种情况下的理想解决方案。使用如下所示的全局重置：

* {
  margin: 0;
  padding: 0;
}

可能会产生意想不到的后果。在这种特殊情况下，由于父元素中缺少填充，“徽标”标题的边距突出到其父元素之外。

建议采用更有针对性的方法：

.logo {
  padding: 10px;
  margin: 0;
}

设置父级的填充可确保“徽标”边距保留在父级内。删除所有边距和填充可能会产生不可预见的影响，因此最好专注于特定元素，而不是诉诸全局重置。

以上是为什么不是 `body { margin: 0; }` 删除我的徽标的上边距？的详细内容。更多信息请关注PHP中文网其他相关文章！