# react/jsx-child-element-spacing

> Disallow a line break between text and an inline element in JSX, where a space may be lost

JSX removes a line break between text and an element, along with the indentation around it. HTML would show a space there. So the first example below renders as "Read thedocs", and nothing in the code says whether that was on purpose.

The rule reports a line break between text and an inline element such as `a`, `b`, `code`, `em`, `span`, or `strong`.

{/* Generated by src/codegen/lint-rule-docs.ts. Do not edit this section. */}

## Configure

Off by default. To turn it on:

```toml bunfig.toml
[lint.rules]
"react/jsx-child-element-spacing" = "error" # or "warn"
```

{/* End of the generated section. */}

## Examples

Reported:

{/* bad */}
```jsx
const help = (
  <p>
    Read the
    <a href="/docs">docs</a>
  </p>
);
```

{/* bad */}
```jsx
const help = (
  <p>
    <strong>Note:</strong>
    this cannot be undone
  </p>
);
```

Not reported:

{/* good */}
```jsx
const help = (
  <p>
    Read the{" "}
    <a href="/docs">docs</a>
  </p>
);

const short = <p>Read the <a href="/docs">docs</a></p>;
```

To show that you don't want a space, put a comment in between:

{/* good */}
```jsx
const price = (
  <p>
    $
    {/* no space */}
    <b>20</b>
  </p>
);
```

The rule doesn't check block elements, `br`, or your own components:

{/* good */}
```jsx
const address = (
  <div>
    Ship to
    <p>1 Main Street</p>
    Springfield
    <br />
    USA
    <Badge />
  </div>
);
```