baseline-source CSS property

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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.

Syntax

css
/* Keyword values */
baseline-source: auto;
baseline-source: first;
baseline-source: last;

/* Global values */
baseline-source: inherit;
baseline-source: initial;
baseline-source: revert;
baseline-source: revert-layer;
baseline-source: unset;

Values

auto

Specifies last baseline alignment for inline-block, first baseline alignment for everything else.

first

Specifies first baseline alignment.

last

Specifies last baseline alignment.

Formal definition

Initial valueauto
Applies toinline-level boxes
Inheritedno
Computed valueas specified
Animation typediscrete

Formal syntax

baseline-source = 
auto |
first |
last

Examples

Baseline selection in inline flex containers

This example demonstrates using the baseline-source property to control the baseline alignment of inline flex containers.

HTML

Our HTML includes several <span> elements, which are generic inline containers for phrasing content. Three of the <span> elements contain nested <span> children.

html
<span>Baseline ___</span>

<span class="box first">
  <span>First</span>
  <span>A</span>
  <span>B</span>
  <span>C</span>
</span>

<span class="box auto">
  <span>Auto</span>
  <span>A</span>
  <span>B</span>
  <span>C</span>
</span>

<span class="box last">
  <span>A</span>
  <span>B</span>
  <span>C</span>
  <span>Last</span>
</span>

CSS

We define all the boxes to be inline flex containers. We set the .first box to use the first baseline, the .auto box uses the default baseline (which is first for inline flex containers), and the .last box uses the last baseline.

css
.box {
  display: inline-flex;
  flex-direction: column;
}

.first {
  baseline-source: first;
}

.auto {
  baseline-source: auto;
}

.last {
  baseline-source: last;
}

Result

Specifications

Specification
CSS Inline Layout Module Level 3
# baseline-source

Browser compatibility

desktop mobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
baseline-source
Chrome – Full support
Chrome 111 (Release date: 2023-03-07)
footnote Full support
Edge – Full support
Edge 111 (Release date: 2023-03-13)
footnote Full support
Firefox – Full support
Firefox 115 (Release date: 2023-07-04)
footnote Full support
Opera – Full support
Opera 97 (Release date: 2023-03-22)
footnote Full support
Safari – No support
Safari
footnote No support
Chrome Android – Full support
Chrome Android 111 (Release date: 2023-03-07)
footnote Full support
Firefox for Android – Full support
Firefox for Android 115 (Release date: 2023-07-04)
footnote Full support
Opera Android – Full support
Opera Android 75 (Release date: 2023-05-17)
footnote Full support
Safari on iOS – No support
Safari on iOS
footnote No support
Samsung Internet – Full support
Samsung Internet 22 (Release date: 2023-07-14)
footnote Full support
WebView Android – Full support
WebView Android 111 (Release date: 2023-03-01)
footnote Full support
WebView on iOS – No support
WebView on iOS
footnote No support
auto
Chrome – Full support
Chrome 111 (Release date: 2023-03-07)
footnote Full support
Edge – Full support
Edge 111 (Release date: 2023-03-13)
footnote Full support
Firefox – Full support
Firefox 115 (Release date: 2023-07-04)
footnote Full support
Opera – Full support
Opera 97 (Release date: 2023-03-22)
footnote Full support
Safari – No support
Safari
footnote No support
Chrome Android – Full support
Chrome Android 111 (Release date: 2023-03-07)
footnote Full support
Firefox for Android – Full support
Firefox for Android 115 (Release date: 2023-07-04)
footnote Full support
Opera Android – Full support
Opera Android 75 (Release date: 2023-05-17)
footnote Full support
Safari on iOS – No support
Safari on iOS
footnote No support
Samsung Internet – Full support
Samsung Internet 22 (Release date: 2023-07-14)
footnote Full support
WebView Android – Full support
WebView Android 111 (Release date: 2023-03-01)
footnote Full support
WebView on iOS – No support
WebView on iOS
footnote No support
first
Chrome – Full support
Chrome 111 (Release date: 2023-03-07)
footnote Full support
Edge – Full support
Edge 111 (Release date: 2023-03-13)
footnote Full support
Firefox – Full support
Firefox 115 (Release date: 2023-07-04)
footnote Full support
Opera – Full support
Opera 97 (Release date: 2023-03-22)
footnote Full support
Safari – No support
Safari
footnote No support
Chrome Android – Full support
Chrome Android 111 (Release date: 2023-03-07)
footnote Full support
Firefox for Android – Full support
Firefox for Android 115 (Release date: 2023-07-04)
footnote Full support
Opera Android – Full support
Opera Android 75 (Release date: 2023-05-17)
footnote Full support
Safari on iOS – No support
Safari on iOS
footnote No support
Samsung Internet – Full support
Samsung Internet 22 (Release date: 2023-07-14)
footnote Full support
WebView Android – Full support
WebView Android 111 (Release date: 2023-03-01)
footnote Full support
WebView on iOS – No support
WebView on iOS
footnote No support
last
Chrome – Full support
Chrome 111 (Release date: 2023-03-07)
footnote Full support
Edge – Full support
Edge 111 (Release date: 2023-03-13)
footnote Full support
Firefox – Full support
Firefox 115 (Release date: 2023-07-04)
footnote Full support
Opera – Full support
Opera 97 (Release date: 2023-03-22)
footnote Full support
Safari – No support
Safari
footnote No support
Chrome Android – Full support
Chrome Android 111 (Release date: 2023-03-07)
footnote Full support
Firefox for Android – Full support
Firefox for Android 115 (Release date: 2023-07-04)
footnote Full support
Opera Android – Full support
Opera Android 75 (Release date: 2023-05-17)
footnote Full support
Safari on iOS – No support
Safari on iOS
footnote No support
Samsung Internet – Full support
Samsung Internet 22 (Release date: 2023-07-14)
footnote Full support
WebView Android – Full support
WebView Android 111 (Release date: 2023-03-01)
footnote Full support
WebView on iOS – No support
WebView on iOS
footnote No support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

See also