How do I prevent the border of an element consuming its padding in Chrome?

January 24, 2022

What I want is a text with a background color, underneath some space (e.g. via border-padding in the example) and then a colored underline (via border-bottom in the example).

The following snippet does exactly what I want in Firefox.
However, in Chrome the border seems to "consume" the padding such that there is no space left in between the texts background color and the underline.

#test {
    background-color: red;
    border-bottom: 5px solid blue;
    padding-bottom: 5px;
    margin: 0px;
    background-clip: content-box;
    -webkit-background-clip: content-box;
}

<div>
  <span id="test">Test div</span>
</div>

Is this behavior documented somewhere and more importantly, is there a way to prevent this from happening in Chrome?

>Solution :

Give the span a display:inline-block; and it will work like in Firefox.

#test {
    background-color: red;
    border-bottom: 5px solid blue;
    padding-bottom: 5px;
    margin: 0px;
    background-clip: content-box;
    -webkit-background-clip: content-box;
    display:inline-block;
}

<div>
  <span id="test">Test div</span>
</div>

Explanation: inline elements tend to not respect the padding-top (or bottom) leading to some inconsistent cross-browser experience. You can read more at this pretty much the same question: Padding for Inline Elements