Skip to main content

Display inline

The display: inline value defines an element that flows naturally with text content, sitting horizontally alongside its neighbors. Elements that default to display: inline are called inline-level elements. They are primarily used for marking up small segments of text within a line.


Key Characteristics of Inline Elements​

Inline elements are designed to be non-disruptive and flexible, resulting in several important limitations compared to block elements:

1. Flows Horizontally and Wraps​

Inline elements sit side-by-side on the same line. When the content reaches the end of the container, the element (and the text after it) will wrap to the next line, maintaining the flow of the text.

2. Ignores width and height​

An inline element's width and height are determined only by its content. Any explicit CSS declarations for width or height (e.g., width: 200px;) are completely ignored.

3. Limited Box Model Support​

Inline elements only respect horizontal dimensions for spacing:

  • Horizontal Padding/Border: padding-left, padding-right, border-left, and border-right are respected and add space horizontally.
  • Vertical Padding/Border: padding-top, padding-bottom, border-top, and border-bottom are respected visually but do not affect the vertical position or spacing of neighboring lines of text. They may visually overlap content above or below.
  • Vertical Margin: margin-top and margin-bottom are completely ignored. Only horizontal margins (margin-left, margin-right) are respected.

Common Inline-Level Elements​

The following HTML elements default to display: inline:

  • <span> (The generic inline container)
  • <a> (Anchor/Link)
  • <strong> / <b> (Bold text)
  • <em> / <i> (Italic text)
  • <label>
  • <q> (Quote)

Interactive display: inline Demo​

In the demo below, observe the key characteristics:

  1. The elements flow on the same line until they wrap.
  2. The explicit width: 150px is completely ignored.
  3. The vertical margins (margin-top: 20px) are ignored.
  4. The vertical padding (padding: 20px) is applied but causes the borders to visually overlap the line of text above.