By default, inline-block elements adjust their height based on the container's line height only when they have content. However, I've noticed that empty or whitespace-only inline block elements default to a height of 0 (observed in Firefox).
Is there a way to make empty inline block elements inherit the height of their container's line height, similar to inline block elements with text content?
I cannot hardcode the height or add random HTML like just to prevent the elements from being considered "empty." Surprisingly, I couldn't find any existing solutions to this issue.
For instance, in this example, I want the first span element (around a regular space) to appear as the second span element (around a ):
.inlineblock {
display: inline-block;
border: 2px solid #FF0000;
}Lorem ipsum dolor sit amet, consectetur<span class="inlineblock"> </span>adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur<span class="inlineblock"> </span>sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumInstead of how it currently appears, as shown in the following image where the first span has a height of 0:
https://i.sstatic.net/8oXFX.jpg
Attempts made so far: Setting a fixed width, using height: auto;, height: inherit;, vertical-align property, creating a position:relative paragraph and/or inline-block container then setting height: 100%;, but none of these methods worked.
.inlineblock {
display: inline-block;
border: 2px solid #FF0000;
}
.width {
width: 5px;
}
.percent {
height: 100%;
}
.relative {
position: relative;
}
.vert {
vertical-align: top;
}
.auto {
height: auto;
}
.inherit {
height: inherit;
}<p class="relative">Lorem ipsum dolor sit amet, consectetur<span class="inlineblock"> </span>adipiscing elit, sed do<span class="inlineblock percent"> </span>eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation<span class="relative"><span class="inlineblock percent"> </span></span>ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in<span class="inlineblock vert"> </span>voluptate velit esse<span class="inlineblock inherit"> </span>cillum dolore<span class="inlineblock auto"> </span>eu fugiat<span class="inlineblock width"> </span>nulla pariatur. Excepteur<span class="inlineblock"> </span>sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>