CSS <baseline-position> Data Type

The CSS <baseline-position> data type represents baseline alignment values used to align the baselines of boxes within an alignment context. It can select the first or last baseline alignment preference.

Syntax

The <baseline-position> data type accepts the baseline keyword, optionally preceded by first or last:

<baseline-position> = [ first | last ]? && baseline

Values

Value	Description
`baseline`	Uses first baseline alignment. It is equivalent to `first baseline`.
`first baseline`	Aligns the first baselines of the participating alignment subjects.
`last baseline`	Aligns the last baselines of the participating alignment subjects.

How <baseline-position> Works

Baseline alignment positions elements according to the baselines of their content rather than their outer edges. This is useful when items contain text of different sizes or have different dimensions but should align according to their text.

The first baseline value uses the first baseline set of the participating boxes, while last baseline uses the last baseline set. When first or last is omitted, baseline represents first baseline.

<baseline-position> Example

The following example uses first baseline with the align-items property to align flex items according to their first baselines:

.container {
  display: flex;
  align-items: first baseline;
}
.item-large { font-size: 32px; }
.item-small { font-size: 16px; }

Browser Result

Large text Small text

The <baseline-position> data type is used by CSS alignment properties that support baseline alignment, including:

Specifications

The <baseline-position> data type is defined in the CSS Box Alignment Module Level 3 .

CSS <baseline-position> Data Type