Propriété CSS `baseline-source`

Disponibilité limitée

Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.

Vous voulez une meilleure prise en charge pour cette fonctionnalité ? Dites-nous pourquoi.

Voir la compatibilité complète
En savoir plus

La propriété CSS baseline-source définit la ligne de base à utiliser lorsque les boîtes de niveau en incise (inline en anglais) ont plusieurs lignes de base possibles, comme les blocs en incise multi-lignes ou les conteneurs flexibles en incise. Les valeurs permettent de choisir entre l'alignement sur la première ligne de base, la dernière ligne de base de la boîte, ou de laisser le navigateur décider automatiquement selon le type de boîte.

Syntaxe

css

/* Valeurs avec un mot-clé */
baseline-source: auto;
baseline-source: first;
baseline-source: last;

/* Valeurs globales */
baseline-source: inherit;
baseline-source: initial;
baseline-source: revert;
baseline-source: revert-layer;
baseline-source: unset;

Valeurs

auto: Définit l'alignement sur last baseline pour les blocs en incise, et sur first baseline pour tout le reste.
first: Définit l'alignement sur first baseline.
last: Définit l'alignement sur last baseline.

Définition formelle

Valeur initiale	`auto`
Applicabilité	boîtes en incise
Héritée	non
Valeur calculée	comme défini
Type d'animation	discrète

Syntaxe formelle

baseline-source = 
  auto   |
  first  |
  last

Exemples

Sélection de la ligne de base dans les conteneurs flexibles en incise

Cet exemple montre comment utiliser la propriété baseline-source pour contrôler l'alignement sur la ligne de base des conteneurs flexibles en incise.

HTML

Notre HTML comprend plusieurs éléments HTML <span>, qui sont des conteneurs en incise génériques pour le contenu phrastique. Trois des éléments <span> contiennent des enfants <span> imbriqués.

html

<span>Ligne de base ___</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 #888888;
  width: 50px;
}

span {
  padding: 0.4rem;
}

Nous définissons toutes les boîtes comme des conteneurs flexibles en incise. Nous configurons la boîte .first pour utiliser la première ligne de base, la boîte .auto utilise la ligne de base par défaut (qui est first pour les conteneurs flexibles en incise), et la boîte .last utilise la dernière ligne de base.

css

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

.first {
  baseline-source: first;
}

.auto {
  baseline-source: auto;
}

.last {
  baseline-source: last;
}