How Can I Justify Inline-Block Elements Without Unwanted Spacing?

Aligning Inline Elements with "text-align: justify"

Despite previous attempts to evenly justify inline-block elements using "text-align: justify," a persistent issue arises: the browser adds an empty vertical space after the 100% width element that clears the line of inline-block elements.

Seeking a solution without using line-height: 0, which eliminates the empty space but discards the original line height, we explore potential alternatives.

Present Workaround (IE8 , FF, Chrome Tested)

(See fiddle: https://jsfiddle.net/jasperdeGroot/xe27o/)

CSS:

.prevNext {
    text-align: justify;
}

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

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

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

Explanation:

This workaround utilizes a :before pseudo-element with a negative bottom margin to shift the text up, eliminating the extra line. The inline-block elements are then adjusted with position: relative to compensate for this displacement.

Future Solution

A promising solution that awaits full support is the use of "text-align-last: justify," which justifies inline elements without the need for workarounds. However, it currently requires experimental features to be enabled in Webkit browsers, limiting its accessibility.

(See fiddle: https://jsfiddle.net/jasperdeGroot/c3r4w/)

CSS:

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

Note: This solution may not be suitable for all browsers until full support is implemented.

The above is the detailed content of How Can I Justify Inline-Block Elements Without Unwanted Spacing?. For more information, please follow other related articles on the PHP Chinese website!