I am facing an issue where I have a div with the class "outer" containing another div with the class "inner". Upon adding a 2px border to the "outer" div, padding is automatically applied in a way that appears as 1px padding on the top, left, and right sides, with no padding at the bottom. Despite setting padding: 0; for the "outer" div, the padding remains unchanged. Is this perhaps a browser bug? I am currently using Chrome on Windows, but have also tested in IE with similar results. Interestingly, when changing the zoom level in Chrome, the padding values adjust accordingly, and at 125% zoom, the padding disappears completely. You can observe the problem here:
https://codepen.io/overdrivemachines/pen/oNewBym
Removing the border from the "outer" div resolves the padding issue.
Despite my attempts to rectify the situation, there is still some yellow appearing in the border, which should not be present. Refer to this image for clarification: https://i.sstatic.net/JtbFt.jpg