Inline-block: how to fight the white space between inline elements.

Rendered White Space between inline elements “dt” and “dd”

causes this element to flow to the next line when using display: “inline-block”.

White Space between inline elements

<<<< Note the white space between the dataterm and data definition.

HTML solutions:

(1)

No white space between “dt” and “dd”: <dt><dd>.

(2)

Divide “dt” tag between two lines.

(3)

Insert comment instead of white space between “dt” and “dd”.

(4)

Remove closing “dt” tags in HTML code.

CSS solution: Reduce the width by 0.5em, the width where a white space element fits.

Lorem …

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim …

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Dt, dd side by side, different font-size.

Lorem

ipsum

dolor

sit

amet,

consectetur

adipiscing

elit

Fixed examples

Display:grid per line.

Display:table per line.