填充顶部影响边界？

Question

将padding-top添加到外部容器有时会添加某种边框。它只会在我开启devtools时发生。为什么会这样？

我的浏览器是OSX 10.12.6中的Chrome 65.0.3325.181（官方版本）（64位）。

<style>
.outer {
  background-color:black;
  padding-top: 20px;
}

.inner {
  height: 100px;
  background-color: white;
}
</style>

<div class="outer">
  <div class="inner"></div>
</div>

这是一个复制品和问题的截图。

请注意意外的左下边框。

https://jsbin.com/gibesidodi/2/edit?html,css,output

Answer 1

填充是内容和边框之间的区域。

因此，如果您添加padding-top，则会移动内容inner。

此结果显示outer有background-color: black。