Adding padding-top
to an outer container sometimes adds some kind of border. It only happens when I have devtools open. Why does this happen?
My browser is Chrome 65.0.3325.181 (Official Build) (64-bit) in OSX 10.12.6.
<style>
.outer {
background-color:black;
padding-top: 20px;
}
.inner {
height: 100px;
background-color: white;
}
</style>
<div class="outer">
<div class="inner"></div>
</div>
Here's a reproduction and a screenshot of the issue.
Note the unexpected bottom and left border.