codescracker


css

CSS3 Line Box Model



« Previous Tutorial Next Tutorial »


CSS3 introduces a new model, called the line box model to enhance the box model.

The line box model helps to display elements and text in line with each other.

It also enables you to display first line of an element in a specified format or to display the first character of an element in big font size.

CSS3 Line Box Model Properties

The following table describes some important properties related to the line box model:

Property Description
alignment-adjust Allows you to specify alignment points for elements
alignment-baseline Specifies the alignment of an inline-level element with
respect to its parent
baseline-shift Allows you to reposition the dominant-baseline with
respect to other dominant-baseline
dominant-baseline Specifies a scaled-baseline-table
drop-initial-after-adjust Specifies an alignment point for the initial letter box with
respect to the primary connection point
drop-initial-after-align Specifies an alignment line within the initial line box
that is used at the primary connection point with the initial letter box
drop-initial-before-adjust Specifies an alignment point of the drop initial
for the secondary connection point
drop-initial-before-align Specifies an alignment line within the initial line box
that is used at the secondary connection point with the initial letter box
drop-initial-size Specifies a value to show the size of the initial letter
drop-initial-value Specifies a value to activate a drop-initial effect
inline-box-align Specifies the alignment of a line of a multi-line inline block with
the previous and next inline elements within a line
line-stacking Specifies a shorthand property for setting the
line-stacking-strategy, line-stacking-ruby, and line-stacking-shift properties
line-stacking-ruby Specifies the line stacking method for elements,
which are ruby annotation elements
line-stacking-shift Specifies the line stacking method for elements,
which are baseline-shifted elements
line-stacking-strategy Specifies the height of the text content area in an inline box

« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test