# react/no-adjacent-inline-elements

> Disallow inline elements that touch each other without whitespace between them

Two inline elements such as `<a>` or `<span>` that touch in the source render with nothing between them, so their text runs together on the page, like "Log inSign up".

The rule knows HTML's inline elements, including `a`, `b`, `button`, `code`, `em`, `i`, `img`, `input`, `label`, `select`, `small`, `span`, `strong` and `textarea`. It also checks an array of children passed to `React.createElement`.

{/* 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/no-adjacent-inline-elements" = "error" # or "warn"
```

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

## Examples

Reported:

{/* bad */}
```jsx
const nav = (
  <div>
    <a href="/login">Log in</a><a href="/signup">Sign up</a>
  </div>
);
```

{/* bad */}
```jsx
const nav = React.createElement("div", undefined, [
  React.createElement("a", { href: "/login" }, "Log in"),
  React.createElement("a", { href: "/signup" }, "Sign up"),
]);
```

Not reported:

{/* good */}
```jsx
const nav = (
  <div>
    <a href="/login">Log in</a> <a href="/signup">Sign up</a>
  </div>
);
```

Elements on separate lines aren't reported, even though JSX drops the line break and renders nothing between them. Write `{" "}` at the end of the line if you want a space there:

{/* good */}
```jsx
const joined = (
  <div>
    <a href="/login">Log in</a>
    <a href="/signup">Sign up</a>
  </div>
);

const spaced = (
  <div>
    <a href="/login">Log in</a>{" "}
    <a href="/signup">Sign up</a>
  </div>
);
```