How to Properly Justify Inline-Block Elements Without Extra Vertical Space?

Proper Text Justification of Inline-Block Elements with "text-align: justify;"

Several discussions have explored the challenges of evenly distributing text across inline-block elements using "text-align: justify;". However, a lingering issue is the empty vertical space that appears below the line of elements.

The proposed workaround, as seen in this fiddle, involves setting "line-height: 0;" on the parent element. However, this sacrifices any previously set line-height on the child elements.

An alternative solution, presented in this fiddle, addresses this issue without affecting line-height:

CSS

.prevNext {
    text-align: justify;
}

.prevNext a {
    display: inline-block;
    position: relative;
    top: 1.2em; /* Your line-height */
}

.prevNext:before{
    content: '';
    display: block;
    width: 100%;
    margin-bottom: -1.2em; /* Your line-height */
}

.prevNext:after {
    content: '';
    display: inline-block;
    width: 100%;
}

Explanation

The "display: block" on the ":before" element with a negative bottom margin lifts the text up by one line-height, eliminating the extra line. The "position: relative" on the inline-block elements counteracts this displacement, but without adding an additional line.

The use of "em" in the margin-bottom and top settings accommodates any line-height set as a multiplier value. This ensures that the displacement matches the intended line height.

Future Clean Solution

A potential future solution employs a webkit property:

.prevNext {
    text-align: justify;
    -moz-text-align-last: justify;
    -webkit-text-align-last: justify;
    text-align-last: justify; /* IE */
}

This method works in Firefox 12.0 and IE8 , but requires experimental features to be enabled in Webkit browsers. In Webkit version 39 , this property is supported without the "-webkit-" extension, but only if experimental features are enabled.

The above is the detailed content of How to Properly Justify Inline-Block Elements Without Extra Vertical Space?. For more information, please follow other related articles on the PHP Chinese website!