Baseline-source - CSS Property

Syntax diagram of baseline-source.

Description of the baseline-source property.

The baseline-source property determines whether an inline element that may span multiple lines should be aligned by its first line or by its last line. This applies to elements displayed as inline-block, inline-flex, and inline-grid.

baseline-source is particularly important because inline elements do not all align in the same way by default. For example, inline-block elements align to their last line by default, while inline-flex elements align to their first line.

Values for baseline-source.

• baseline-source: auto;

  Elements are aligned according to their default behavior, based on their type:

  • inline-block: aligned to their last line.
  • inline-flex: aligned to their first line.
  • inline-grid: aligned to their firsdt line.
  Element inline-block
  with 2 lines of text.

  Element inline-block
  with 3 lines
  of text.

  
  

  Element inline-flex
  with 2 lines of text.

  Element inline-flex
  with 3 lines
  of text.

  
  

  Element inline-grid
  with 2 lines of text.

  Element inline-grid
  with 3 lines
  of text.
• baseline-source: first;

  The element aligns to its first line regardless of its display mode.

  Element inline-block
  with 2 lines of text.

  Element inline-block
  with 3 lines
  of text.

  
  

  Element inline-flex
  with 2 lines of text.

  Element inline-flex
  with 3 lines
  of text.

  
  

  Element inline-grid
  with 2 lines of text.

  Element inline-grid
  with 3 lines
  of text.
• baseline-source: last;

  The element aligns to its last line regardless of its display mode.

  Element inline-block
  with 2 lines of text.

  Element inline-block
  with 3 lines
  of text.

  
  

  Element inline-flex
  with 2 lines of text.

  Element inline-flex
  with 3 lines
  of text.

  
  

  Element inline-grid
  with 2 lines of text.

  Element inline-grid
  with 3 lines
  of text.
• baseline-source: initial; (auto) baseline-source: inherit; baseline-source: revert; baseline-source: revertLayer; baseline-source: unset;

  See the following pages for more details: initial, inherit, revert, revert-layer, unset.

Animation of the baseline-source property.

The animation of baseline-source is possible, of course in a discontinuous manner, that is to say that the property jumps abruptly from one value to another (no interpolation) since it involves only predefined values.

Below, we have three blocks whose display has been set to inline-block, and each of which contains a different number of lines.

Access the baseline-source property via a program

With Javascript, change the value of baseline-source.

In JavaScript, here's how to change the value of baseline-source. JavaScript supports a syntax using the standard CSS notation, kebab-case (hyphens to separate words), and another syntax using the camel-case notation (capital letters at the beginning of words).

let el = document.getElementById('id'); el.style['baseline-source'] = 'first'; // or let el = document.getElementById('id'); el.style.baselineSource = 'first';

With Javascript, read the value of baseline-source.

This code retrieves the value of baseline-source when the property has been assigned directly to the element itself via its style attribute, rather than through a selector. There are two syntaxes as well.

let el = document.getElementById('id'); let value = el.style['baseline-source']; // or let el = document.getElementById('id'); let value = el.style.baselineSource;

With Javascript, read the computed value of baseline-source.

The calculated value is either the result of the inheritance cascade or the initial value, i.e., auto in the case of baseline-source.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('baseline-source');

With JQuery, change the value of baseline-source.


$('#id').css('baseline-source', 'first');
// or
$('#id').css('baselineSource', 'first');


With JQuery, read the computed value of baseline-source.

let value = $('#id').css('baseline-source');

Other code examples.

More examples of JavaScript and jQuery code can be found on the Javascript and CSS page.

Try it for yourself

The buttons below apply the entered value to the baseline-source property and then display the value as it was applied, or the calculated value. In the case of baseline-source, the result will be the same unless you enter an incorrect value.

Simulator.

Browsers compatibility with baseline-source.

The baseline-source property is starting to gain widespread recognition (2026). It can be used, but please note that Safari   is not yet compatible, nor are most less-common browsers.

1

baseline-source
property

Estimated overall support.

76%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Edge

Safari

Firefox

Opéra

Safari sur IOS

Chrome

Chrome pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Historic of the baseline-source property.

• CSS Inline Layout Module Level 3

  This module covers everything related to text block alignment, both within grid-based containers and for inline blocks (content within a flexbox or an inline-block). The vertical alignment properties, in particular, have been significantly enhanced.

  Regarding baseline-source. Building on the limited vertical alignment capabilities of CSS2, the baseline-source property has been added.
  

  December 18, 2014

  Working Draft.

  

  

  

See also, regarding the online dispositions.

The specification module named CSS Inline Layout Module defines aspects related to the layout of elements relative to the line, whether within a SVG object or a HTML document. The baseline-source property is described in this module, along with the following:

Properties:

alignment-baseline

Defines how an element is aligned vertically relative to its parent.

⚠

baseline-shift

Set the offset, up or down, of the baseline of the text.

Baseline-source

Defines whether the vertical alignment of an element must be done relative to its first or last line of text.

dominant-baseline

Specifies which baseline is used for vertical text alignment.

⚠

initial-letter

Sets a drop cap: character size, how many lines it covers, etc.

⚠

initial-letter-wrap

Defines how the text should wrap around drop caps, specifically following as closely as possible the shape of the drop cap character or not.

line-height

Sets the height of lines of text.

⚠

text-box

Allows the removal of spaces located before and/or after the lines of text.

⚠

text-box-edge

Sets the metric for CJK texts.

⚠

text-box-trim

Specifies how reducing the dimensions of a text box should be done to conform to text-box-edge (CJK languages).

vertical-align