# Inline

Puts pieces side by side and wraps when they do not fit.

## Playground

```html
<div class="feitio-inline" data-gap="1"><span class="lay-box">1</span><span class="lay-box">2</span><span class="lay-box">3</span></div>
```

## When to use

-   Whenever there is space between pieces: space belongs to the parent, and only a step of the scale.

## When not to use

-   **For a component’s inner padding:** it comes ready.
-   **With a hand-written margin alongside:** never; the check fails it.

## Examples

### Inline

Four pieces at `space-2`.

Show code

```html
<div class="feitio-inline" data-gap="2">
  …
</div>
```

```jsx
<Inline gap={2}>
  …
</Inline>
```

### Wrapping

When the pieces do not fit, the line wraps, and the same space holds between the lines: nothing touches.

Show code

```html
<div class="feitio-inline" data-gap="3">
  …
</div>
```

### Spread

`data-justify="between"` takes the first piece to one side and the last to the other, like a heading and its action.

Show code

```html
<div class="feitio-inline" data-gap="3" data-justify="between">
  <h2>…</h2>
  <button class="feitio-button">…</button>
</div>
```

## Attributes

Attribute

Values

What for

`class="feitio-inline"`

required

The layout.

`data-gap`

`1` to `7`

The space between pieces. In React, no other value compiles.

`justify`

`"between"`, `"end"`

How pieces spread along the line.

The rules and a whole form built with all three are in [Layout](/en/dev/layout/).