CODEWITHSUNDEEP
javascripthtmlcssreactjs
Oscar Arranz
Oscar Arranz

Reputation: 714

Remove space between inline-block elements in React

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:

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).

Upvotes: 2

Views: 5970

Answers (1)

caffeinated.tech
caffeinated.tech

Reputation: 6548

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>

Upvotes: 2

Related Questions