I have a div () with another div () inside of it. When I add border of 2px to the "outer" div, padding is automatically added to the outer div. It looks like 1px padding on the top, left and right and none at the bottom. How do we remove all the padding? I set padding: 0; for the "outer" div and it has no effect. Is this a browser bug? I am using Chrome on Windows. I even tried IE. If I change the zoom in Chrome, the padding changes too and at a certain zoom (125%), the padding becomes 0. The problem can be seen here:

https://codepen.io/overdrivemachines/pen/oNewBym

If the border is removed from the "outer" div, the outer div loses its padding.

There should be no yellow in the border, however I see yellow as shown here: https://imgur.com/HO1f1uo

CodePudding user response：

there's no padding, what you're seeing is the border you just added :) Change the border color to a different color than outer's background and you can see that.

CodePudding user response：

Windows has a default scaling of 125% (in the display setting) for my laptop. Perhaps that's why some of you will not be able to see the yellow in the border I was referring to. If you get rid of the border property and replace it with outline: red solid 2px; it seems to solve the issues I am facing. With outline, even zooming chrome doesn't cause any issues. There is probably a rendering bug in Chrome and other browsers in rendering borders when the display in Windows settings is set to 125%.