首页 > web前端 > css教程 > 为什么不是 `body { margin: 0; }` 删除我的徽标的上边距?

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

Patricia Arquette
发布: 2024-12-28 08:54:10
原创
244 人浏览过

Why Isn't `body { margin: 0; }` Removing My Logo's Top Margin?

排查 CSS 中的边距移除问题

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

1

2

3

body {

  margin: 0;

}

登录后复制

问题声明

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

1

2

3

4

5

6

7

8

9

10

11

12

13

<head>

  <style>

    body {

      margin: 0;

    }

  </style>

</head>

 

<body>

  <div class="logo">

    <h1>Logo</h1>

  </div>

</body>

登录后复制

答案

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

1

2

3

4

* {

  margin: 0;

  padding: 0;

}

登录后复制

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

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

1

2

3

4

.logo {

  padding: 10px;

  margin: 0;

}

登录后复制

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

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

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板