The baseline-shift property allows repositioning of the dominant-baseline relative to the dominant-baseline. The shifted object might be a sub- or superscript. Within the shifted element, the whole baseline table is offset; not just a single baseline. For sub- and superscript, the amount of offset is determined from the nominal font of the parent.

  • Initial valuebaseline
  • Applies toInline-Level elements
  • InheritedNo
  • MediaVisual
  • Computed value-
  • AnimatableNo
  • CSS VersionCSS3
  • JavaScript syntaxobject.style.baselineShift
Formal syntax: baseline | sub | super | <percentage> | <length>

baseline-shift: baseline;
baseline-shift: sub;
baseline-shift: super;
baseline-shift: 10%;   /* Percentage */
baseline-shift: 20px;  /* Length */
  • baselineThere is no baseline shift; the dominant baseline remains in its original position.
  • subThe dominant baseline is shifted to the default position for subscripts. The offset for this position is determined by the font data for the parent nominal font as adjusted by the dominant baseline-table font-size of the parent element. If there is no applicable font data the User Agent may use heuristic to determine the offset.
  • superThe dominant baseline is shifted to the default position for superscripts. The offset for this position is determined by the font data for the parent nominal font as adjusted by the dominant baseline-table font-size of the parent element. If there is no applicable font data the User Agent may use heuristic to determine the offset.
  • <percentage>The computed value of the property is this percentage multiplied by the computed 'line-height' of the parent element. The dominant-baseline is shifted in the shift-direction (positive value) or opposite to the shift-direction (negative value) of the parent area by the computed value. A value of '0%' is equivalent to 'baseline'.
  • <length>The dominant-baseline is shifted in the shift-direction (positive value) or opposite to the shift-direction (negative value) of the parent area by the [length] value. A value of '0cm' is equivalent to 'baseline'.
.class {
   baseline-shift: sub;
}
?Firefox?Explorer?Chrome?Safari?Opera


Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.