0

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.

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

Here's how I see it

김민준
  • 647
  • 9
  • 13
  • @dippas: The asker is referring to that grey border around the div. I haven't been able to reproduce it, but something else is at play here. I also originally thought they were asking about the black part. – BoltClock Apr 03 '18 at 02:03
  • @BoltClock Thank you for clarifying it for me. I will edit the question to make myself clear. Have you tried with the devtools open? I only see the borders when I open devtools – 김민준 Apr 03 '18 at 02:33
  • No, I haven't been able to reproduce it regardless of the state of the dev tools. I'm on a PC, so I wonder if this might be yet another Mac-specific issue. – BoltClock Apr 03 '18 at 03:02

1 Answers1

0

Padding is the area between content and the border.

So if you add padding-top, you move the content inner down.

This result in showing outer which has background-color: black.

Tien Liang
  • 215
  • 1
  • 3
  • Thank you for your answer. However, I am not referring to the top border, rather the unexpected bottom and left border. I have edited the question to clarify myself. – 김민준 Apr 03 '18 at 02:37
  • There is no border showing on my page like yours. I am using Mac and chrome as well. – Tien Liang Apr 03 '18 at 04:09