How to Eliminate Extra Vertical Space Below Justified Inline-Block Elements?

How to Properly Justify "text-align: justify;" Inline-Block Elements

While previous discussions have explored effective methods to evenly distribute inline-block elements using "text-align: justify," a persistent issue remains: the unwanted vertical space beneath the last line of elements.

Present Workaround

This issue can be resolved using the following CSS and HTML structure:

HTML:

<div class="prevNext">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
</div>

CSS:

.prevNext {
    text-align: justify;
}

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

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

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

Explanation:

The :before element with a negative bottom margin lifts the lines of text, eliminating the extra space. The relative positioning on the inline-block elements counteracts this shift without adding an extra line. The em units ensure that the margins align regardless of the line-height used.

Future Solution

A near-future solution involves using the text-align-last property:

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

This eliminates the need for additional CSS tricks, but currently requires experimental feature activation in Webkit browsers.

Handling Minified Text Issue

If minification removes spaces between inline-block elements, add a non-breaking space character ( ) between the anchor tags.

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