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)
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).
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.