Question

我遇到了一个问题，我的子元素的背景颜色超过了我的父元素边界。我该如何补救？

.package {
  border: 1px solid black;
  min-height: 200px;
  margin-bottom: 1rem;
  border-radius: 20px;
}

.banner {}

.fedex {
  background-color: #4D148C;
  color: white;
  border-bottom: 3px solid #FF6600;
}

.logo {
  padding: 1rem;
}

<div class="package">
  <div class="banner fedex">
    <div class="logo"></div>
  </div>
</div>

编辑：我应该提一下，我尝试仅在 banner 的顶部添加相同的边框半径，但这会在颜色和父级边框之间留下一个小空白。

Answer 1

overflow:hidden 将阻止内部子元素超出父元素的边界。

.package {
  border: 1px solid black;
  min-height: 200px;
  margin-bottom: 1rem;
  border-radius: 20px;
  overflow:hidden;
}

.banner {}

.fedex {
  background-color: #4D148C;
  color: white;
  border-bottom: 3px solid #FF6600;
}

.logo {
  padding: 1rem;
}

<div class="package">
  <div class="banner fedex">
    <div class="logo"></div>
  </div>
</div>

Answer 2

除了使用overflow: hidden，还可以使用contain: content，它告诉其他元素该特定元素内的子元素永远不会影响其他元素，也永远不会显示在父元素之外元素。

.package {
  border: 1px solid black;
  min-height: 200px;
  margin-bottom: 1rem;
  border-radius: 20px;

  /* ADDED */
  contain: content;
}

.banner {}

.fedex {
  background-color: #4D148C;
  color: white;
  border-bottom: 3px solid #FF6600;
}

.logo {
  padding: 1rem;
}

<div class="package">
  <div class="banner fedex">
    <div class="logo"></div>
  </div>
</div>

Answer 3

.package {
  border: 1px solid black;
  min-height: 200px;
  margin-bottom: 1rem;
  border-radius: 20px;
  overflow: hidden;
}

.banner {}

.fedex {
  background-color: #4D148C;
  color: white;
  border-bottom: 3px solid #FF6600;
}

.logo {
  padding: 1rem;
}

<div class="package">
  <div class="banner fedex">
    <div class="logo"></div>
  </div>
</div>

背景颜色从父级溢出

3 个答案: