4 ms·
In addition, the two cases can be toggled on and off using CSS alone, because `display:inline`, `display:block`, and `display:inline-block` all do different thi
by MrJohz 2y ago
In addition, the two cases can be toggled on and off using CSS alone, because `display:inline`, `display:block`, and `display:inline-block` all do different things to the two pieces of whitespace:
* `display:inline` allows the trailing space to be rendered (in red). There is now whitespace between the two elements, therefore all other whitespace up until the next non-whitespace character will be ignored.
* `display:inline-block` will remove the trailing red whitespace. Therefore when the blue whitespace is found, this is rendered.
* `display:block` will render the element as a block. Therefore trailing whitespace in that element and leading whitespace in the next element will both be ignored.
This is surprisingly weird and funky. I thought I had a fairly good handle of how odd whitespace in HTML could be, but I didn't realise how much it was controlled by different CSS display settings.