twbs
problem with .row.g-* classes inside d:block divs
Prerequisites
- [X] I have searched for duplicate or closed issues
- [X] I have validated any HTML to avoid common problems
- [X] I have read the contributing guidelines
Describe the issue
When I define a row with a gutter class inside a div, there is a problem with the negative margin, as long as it's display:block (flex and grid will work here).
In certain constellations the negative margin is ignored upwards, which pulls the complete outer container upwards with it.
As soon as I give the outer element a minimal padding or put another element in front of it, it is displayed correctly. This would basically be a working fix, but it may be that the browser renders this 0.01px as a light line and just when one colored layer follows another, it looks incorrect.
You can see the problem in the following fiddle https://jsfiddle.net/fv4regod/. The box should only be as high as the text. But the first yellow box has a "distance" of 1.5rem to the top (the negative margin). In the blue box below you can see very well that the text protrudes into the yellow box.
Is this more of a user error on my part or actually a bug? Would anyone have another idea to fix this problem?
Reduced test cases
https://jsfiddle.net/fv4regod/
What operating system(s) are you seeing the problem on?
macOS
What browser(s) are you seeing the problem on?
Chrome
What version of Bootstrap are you using?
v5.2.0
Unsure how to proceed here just yet. The problem likely comes down to different display types creating different block formatting contexts in the browser, which changes how margin/padding interact with surrounding elements. Personally I think the vertical grid gutter is a little too clever and I'd like to modify it in v6. TBD on if that's possible though.
