CODEWITHSUNDEEP
htmlreactjs
Jeremy Sorensen
Jeremy Sorensen

Reputation: 1130

React removes spacing between elements

Here is a fiddle to demonstrate:

html

<div>
  <button>One</button>
  <button>Two</button>
  <button>Three</button>
</div>
<div id="app"></div>

js

function Buttons() {
  return (
    <div>
      <button>One</button>
      <button>Two</button>
      <button>Three</button>
    </div>
  );
}
ReactDOM.render(<Buttons />, document.querySelector("#app"))

Basically whether or not I have any stylesheets, putting elements next to each other causes them to have 9px of space between them (at least on Chrome) but doing the exact same thing inside a react component puts no space between them. I would like to know why they are not consistent and how to make them consistent if possible.

Upvotes: 1

Views: 1683

Answers (2)

Dupocas
Dupocas

Reputation: 21317

JSX removes whitespace at the beginning and ending of a line. It also removes blank lines. New lines adjacent to tags are removed; new lines that occur in the middle of string literals are condensed into a single space.

So the following declaration in html

<button>1</button>
<button>2</button>

Actually takes in consideration the line break.

The same declaration in jsx is the equivalent of writing like this in html

<button>1</button><button>2</button>

Edit bitter-cdn-mlqrr

Upvotes: 1

Pierre V.
Pierre V.

Reputation: 1625

The reason for this difference is that React removes whitespace at the beginning and ending of a line.

The space you see between the buttons in your html example is due to the whitespace characters between the <button> tags in your html code.

If you change your React code to the following, you will get a result similar to your html example:

function Buttons() {
  return (
    <div>
      <button>One</button> <button>Two</button> <button>Three</button>
    </div>
  );
}
ReactDOM.render(<Buttons />, document.querySelector("#app"))

My advice would be to let React remove the whitespace between the elements, and use css to properly control the spacing.

Upvotes: 2

Related Questions