# Bad value “inline-block” for attribute “display” on element “svg”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-inline-block-for-attribute-display-on-element-svg
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `display` attribute on an `<svg>` element does not accept CSS values like `inline-block`. The `display` attribute in SVG is a presentation attribute that only accepts SVG-specific values: `inline`, `block`, `list-item`, `none`, and a few others defined in the SVG specification, but not `inline-block`.

SVG presentation attributes map to a limited subset of CSS properties, and their allowed values don't always match the full range of CSS values. The `display` presentation attribute on SVG elements accepts values like `inline`, `block`, `none`, `run-in`, `table`, and related table display values, but `inline-block` is not among them.

To apply `inline-block` display behavior to an `<svg>` element, use a `style` attribute or a CSS rule instead of the `display` presentation attribute.

## Invalid example

```html
<svg display="inline-block" width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>
```

## Valid example

Use the `style` attribute to set `inline-block`:

```html
<svg style="display: inline-block" width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>
```

Or apply it through CSS:

```html
<style>
  .icon {
    display: inline-block;
  }
</style>
<svg class="icon" width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>
```