If element is inline-block and pseudo-classes is :hover css property margin-bottom is not work, if value < 0 and element is conteiner for IMG tag. See example in attachment file. Sorry me for my bad English.
Created attachment 113600 [details] example for bug 71531
Created attachment 211816 [details] Reduction
WebKit might be correct here. The red img inside the inline-block is overflow as the inline block's neighbours are concerned. Unlike the case where the img is an inline the inline-block has its own height and it's that height the neighbours should respect. There's no reason why they should move below the overflow instead.
Let me correct a few typos in that comment: WebKit might be correct here. The red img inside the inline-block is overflow as far as the inline block's neighbours are concerned. Unlike the case where the img is in an inline element the inline-block has its own height and it's that height the neighbours should respect. There's no reason why they should move below the overflow instead.
I am not able to reproduce this bug in Safari 15.6.1 and Safari Technology Preview 151 and both browser render the text line below red box and it is matching with other browsers (Chrome Canary 106 and Firefox Nightly 105). Since all browsers are matching, I am going to mark this as "RESOLVED CONFIGURATION CHANGED", please reopen if I understood the test case wrong or I am testing it incorrectly. Thanks!