baseline-source

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

Value not found in DB!

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

body {
  font-family: sans-serif;
}

.box {
  border: 2px solid #888;
  width: 50px;
}

span {
  padding: 0.4rem;
}

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

Help improve MDN

Learn how to contribute

This page was last modified on ⁨Jan 1, 1970⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content