child 元素上的填充移动 parent 元素 - CSS

Question

我正在构建一个全屏画廊

#cover {
  position: absolute;
  width: 500px;
  height: 500px;
  background: rgba(44, 69, 128, 0.65);
  z-index: 10;
}
.divHolder {
  background: #fff;
  color: #2c4580;
  position: relative;
  box-shadow: 2px 2px 2px #333;
  padding: 10px;
  margin: 20px 20px;
  overflow: auto;
  height: 100%;
}
.divHolder div:hover {
  border: 10px solid #000;
}
.divHolder div {
  width: 100px;
  height: 100px;
  background: black;
  padding: 10px;
  display: inline-block;
  cursor: pointer;
  border: 10px solid white;
}

<div id="cover">
  <div class="divHolder">
    <div>image</div>
    ...
    <div>image</div>
  </div>
</div>

输出：

如何将 child div "divHolder" 支架放入 "holder" 内。我总是不明白填充和边距与 child divs.

的工作方式

为了参考，我添加了代码jsfiddle

Answer 1

您可以使用 calc() 来计算 .divHolder 的合适高度。由于您的边距，.divHolder 超出了父容器，因为您将其设置为 height: 100%;。减少 100% 的顶部和底部边距，它应该适合：

height: calc(100% - 40px);

#cover {
  position: absolute;
  width: 500px;
  height: 500px;
  background: rgba(44, 69, 128, 0.65);
  z-index: 10;
}
.divHolder {
  background: #fff;
  color: #2c4580;
  position: relative;
  box-shadow: 2px 2px 2px #333;
  padding: 10px;
  margin: 20px 20px;
  overflow: auto;
  height: calc(100% - 40px);
  box-sizing: border-box;
}
.divHolder div:hover {
  border: 10px solid #000;
}
.divHolder div {
  width: 100px;
  height: 100px;
  background: black;
  padding: 10px;
  display: inline-block;
  cursor: pointer;
  border: 10px solid white;
}

<div id="cover">
  <div class="divHolder">
    <div>image</div>
    <div>image</div>
    <div>image</div>
    <div>image</div>
    <div>image</div>
    <div>image</div>
    <div>image</div>
    <div>image</div>
    <div>image</div>
    <div>image</div>
    <div>image</div>
    <div>image</div>
  </div>
</div>

child 元素上的填充移动 parent 元素 - CSS

padding on child element moves parent element - CSS

html

css

margin

padding