Limited support Useful when baseline-source adds a clear capability without requiring fragile workarounds.

baseline-source

The baseline-source CSS property defines which baseline to use when inline-level boxes have multiple possible baselines, such as multi-line inline blocks or inline flex containers. The values allow for choosing between aligning to the box's first baseline, last baseline, or letting the browser decide automatically based on the box type.

Other

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
baseline-source
111
111
115
111
auto
111
111
115
111
first
111
111
115
111
last
111
111
115
111
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
.inline-block {
  display: inline-block;
  baseline-source: first;
}

Live demo

first baseline

CSS First baseline demo.

PreviewFullscreen

last baseline

CSS Last baseline demo.

PreviewFullscreen

auto baseline

CSS Auto baseline demo.

PreviewFullscreen

Use cases

  • Browser-native behavior

    Use baseline-source to rely on the platform for behavior that would otherwise require extra code or CSS complexity.

  • Progressive enhancement

    Enhance the experience where support exists while keeping a solid baseline elsewhere.

Cautions

  • Check browser support and actual product need before adding a new platform feature widely.
  • Keep feature usage understandable so future contributors know why it was chosen.

Accessibility

  • New platform features should still preserve readable defaults and robust interaction patterns.
  • Verify that enhancement paths do not leave unsupported environments with a broken experience.

Related links