Skip to content

inline.mdx

Latest commit

 

History

History
58 lines (41 loc) · 2.74 KB

inline.mdx

File metadata and controls

58 lines (41 loc) · 2.74 KB
title Display inline
description Learn the behavior of inline-level elements in CSS, including how they flow horizontally, ignore explicit width/height settings, and only respect horizontal margins/padding.
keywords
CSS display inline
inline element behavior
horizontal flow
wrapping
box model restrictions
layout
tags
CSS display inline
inline element behavior
horizontal flow
wrapping
box model restrictions
layout
sidebar_label 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.