[HELP] Weird Space Between DIVs

Hoping someone can help me understand where this space is coming from: The two boxes with dice rolls are set to inline-block with a width of 50% using box-sizing: border-box.  There's 0 margin and 0 padding.  I had to turn on white-space: nowrap to figure out why the second box kept going under the first.  I can get rid of the space by setting a negative left margin, but would rather not do that if I don't have to. Any help would be greatly appreciated.

I'm not proficient enough to be able to tell what the problem is without seeing your code. When I run into a problem like this, I'll often set the background colours to something weird so that I can see exactly where the boundaries are between divs - sometimes that helps.

It's probably because of the whitespace setting, which I'm assuming is on the overall container that both are in. This would cause the whitespace from your formatted code (aka indenting your nested lines) to display as well.

It's definitely whitespace. Use CSS grid or flexbox and never worry about whitespace again 🙂.

Jakob said: It's definitely whitespace. Use CSS grid or flexbox and never worry about whitespace again . This! CSS Grid is a miracle worker for 2-dimensional layouts. Flexbox is awesome as well, and actually better than grid when you only care about alignment along one axis.

Flexbox did the trick.  I'll just need to start making all my DIVs that. :-/ Thanks. :)

Nice! Yes you should. Inline-blocks are really a thing of the past, sadly Roll20's built-in classes use them (and probably will continue to do so for legacy compatibility).