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

baseline-source

The baseline-source CSS property controls how inline-level boxes with multiple lines of text are aligned with the surrounding text. By default, which typographic baseline is used depends on the display property value.

Other

Overview

The baseline-source CSS property controls how inline-level boxes with multiple lines of text are aligned with the surrounding text. By default, which typographic baseline is used depends on the display property value.

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

Powered by web-features