Browser issue User Banner Styling bug

[Claudio]

There's a display bug on the user banner styling option. You'll see that below the blue bar there's a blue line which belows to RoyalBlue banner:


If I uncheck the -webkit-column-break-inside: avoid; property, the blue line dissapear and goes to the top of RoyalBlue banner where it should be

 

[Mike]

I should note that thread prefixes have had this since 1.1 as well.

Removing that line causes other issues. I don't actually understand why the CSS causes this - it seems like a browser bug. It's very minor though.

 

[CyberAP]

I should note that thread prefixes have had this since 1.1 as well.

Removing that line causes other issues. I don't actually understand why the CSS causes this - it seems like a browser bug. It's very minor though.

It's because of the margins. They are now handled differently in columns and all margin-top's and margin-bottom's spread to next column instead of collapsing at the bottom or the top of the column. Which is a really weird decision in my opinion.

 

[Jay]

It's because of the margins. They are now handled differently in columns and all margin-top's and margin-bottom's spread to next column instead of collapsing at the bottom or the top of the column. Which is a really weird decision in my opinion.

So then what's the solution across all browsers?