1

Before you mark this question as a duplicate, please read this:

What I am trying is to specifically do this in react, if this was html this would be as easy as doing something like (div being inline-block):

<div>something</div><
div>something2</div>

That would result in no white space between the divs, cool, but I can't do that in React as React uses JSX instead of HTML.

I've read different solutions for doing this with CSS, some of them are:

  • Setting a margin-left with a negative value (this probably will break when resizing the browser window (it won't be responsive basically)

  • Setting the parent container font-size to 0 (I've read this is buggy in some platforms)

  • Floating the parent container to the left (I need the use of text-align and floating just messes everything up).

So the only thing would be to use flexbox, but I wonder if there's any other way of removing those white spaces (if not, I will use flexbox/table).

Oscar Arranz
  • 631
  • 2
  • 9
  • 23
  • 3
    How about the comment thing? `
    something
    something2
    `?     – yunzen May 09 '19 at 10:46
  • 4
    Regarding of buggyness of `font-size:0`: which platforms did you read about and which ones are you going to support? Are those even supported by React? – yunzen May 09 '19 at 10:48
  • @yunzen That is an HTML comment which does not exist in JSX – Oscar Arranz May 09 '19 at 12:49
  • @yunzen I read it's buggy on Android below a 4.x version (I don't remember the excact version). What I'm developing is a webapp and it should work on phones too. – Oscar Arranz May 09 '19 at 12:51

1 Answers1

2

React specifically doesn't add whitespace between block elements, you need to do that yourself manually. See this discussion on Github and an official blog post explaining the details.

Here is a simple example:

class SimpleExample extends React.Component {
 render() {
  return (
   <div>
        <div>NO</div>
        <div>SPACES</div>
        HERE
   </div>
  );
 }
}

ReactDOM.render(<SimpleExample />, document.getElementById('example'));
div {
  display:inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="example"></div>
caffeinated.tech
  • 6,428
  • 1
  • 21
  • 40
  • This is it, I thought there were white spaces because everything appeared at a new line but it finally was a specific css property that was messing with it. – Oscar Arranz May 09 '19 at 12:53