7 ms·
> White space does not determine the behavior or display of other HTML tags. As mentioned in the article, the collapsing behavior of leading/trailing white spa
by matt_kantor 2y ago
> White space does not determine the behavior or display of other HTML tags.
As mentioned in the article, the collapsing behavior of leading/trailing white space can affect other elements.
The only difference between the two cases in the following example is that the latter has a space at the end of first element's content. That causes the second element's leading space to not be rendered: https://codepen.io/mkantor/pen/RNbXVJM?editors=1000 https://codepen.io/mkantor/pen/RNbXVJM?editors=1000
- MrJohz 2y agoIn 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.