0

I have noticed that create-react-app removes spaces between inline block elements.

This is the spaces I am talking about: https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Here is Codepen plain HTML where spaces stay: https://codepen.io/edvardsniedre/pen/vYONOQj?editors=1100

code

And here CodeSandbox React JSX where spaces go: https://codesandbox.io/s/react-bootstrap-bwdvb

Can anyone explain why?

I prefer spaces. As otherwise I have to add additional styles to add spaces to buttons and so on. Please help.

Edvards Niedre
  • 620
  • 1
  • 6
  • 20
  • Mainly because JSX is not HTML. It is a syntax sugar for function calls. And there is no "space" between function calls. If you want spaces you can manually add them `A{' '}B` – Yury Tarabanko Feb 11 '20 at 21:59
  • That interesting. Thanks for reply. But this is annoying.. as it makes css frameworks like Bootstrap and others to misbehave in CRA as this frameworks sometimes rely on this spaces to achieve certain looks of components. I will need to add {' '} all over the place otherwise designers will complain that work doesn't match brand guidelines and explain to other developers what this mess is for... Another same situation I have with input radio button and label in another framework. – Edvards Niedre Feb 11 '20 at 22:14

0 Answers0