Question

我试图摆脱橙色背景色（顶部，右侧和左侧）周围的空白。我当时在考虑使用position属性来扩展高度和宽度，但是不确定这是否是一个好主意。抱歉，我对此很陌生。

html {
  box-sizing: border-box;
}

.profile-image {
  height: 8rem;
  width: 8rem;
  border-radius: 20rem;
}

.profile {
  text-align: center;
  padding-top: 2rem;
}

.background {
  background-color: orange;
}

<div class="background">
  <div class="profile">
    <figure>
      <img class="profile-image" src="https://gamerheadquarters.com/hub/avatar/fallout76tshirt.jpg" alt="profile photo">
      <h1 class="profile-name">John Johnson</h1>
    </figure>
  </div>
</div>

Answer 1

浏览器默认情况下会向<body>元素添加一些边距，这就是造成这种情况的原因。您可以通过将其添加到CSS代码中来删除它：

body {
  margin: 0;
}

Answer 2

您应该始终对所有元素使用margin：0和padding：0。您可以使用

*{
  padding:0;
  margin:0;
  box-sizing:border-box;
}

这将防止您在代码中使用预定义的空格

如何消除背景色周围的空白？

2 个答案: