The line-stacking-strategy property determines the line stacking strategy for stacked line boxes within a containing block element. The term 'stack-height' is used in the context of this property description to indicate the block-progression advance for the line boxes.

  • Initial valueinline-line-height
  • Applies toBlock level elements
  • InheritedYes
  • MediaVisual
  • Computed valueSpecified value (except for initial and inherit)
  • AnimatableNo
  • CSS VersionCSS3
  • JavaScript syntaxobject.style.lineStackingStrategy
Formal syntax: inline-line-height | block-line-height | max-height | grid-height

line-stacking-strategy: inline-line-height;
line-stacking-strategy: block-line-height;
line-stacking-strategy: max-height;
line-stacking-strategy: grid-height;
  • inline-line-heightThe stack-height is the smallest value that contains the extended block progression dimension of all the inline elements on that line when those elements are properly aligned. Since the line spacing information is already included in the computation of the line box, these line boxes are simply stacked adjacent to one another in the formatted block to which they belong.
  • block-line-heightThe stack-height is determined by the block element 'line-height' property value. The 'line-height' property value is ignored for inline elements.
  • max-heightThe stack-height is the smallest value that contains the block progression dimension of all the inline elements on that line when those elements are properly aligned.
  • grid-heightThe stack-height is the smallest multiple of the block element 'line-height' computed value that can contain the block progression of all the inline elements on that line when those elements are properly aligned.
.class {
   line-stacking-strategy: max-height; 
}
?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.