One way to eliminate the space above and below text in this example is by adjusting the line-height and height properties.
@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,500,700);
span {
font-size: 50px;
font-weight: 600;
font-family: 'Roboto';
display: inline-block;
vertical-align: top;
height: .75em;
line-height: .75em;
background-color: gold;
}
.noselect{
user-select: none;
}
.upper{
font-size:20px;
position:relative; //EDIT 2
}
.lower::selection { background: none; } //EDIT 1<div><span class='upper'>UPPER</span></div>
<div><span class='lower'>LOWER</span></div>However, an issue arises when selecting the text 'LOWER', as it covers part of the 'UPPER' text. This makes it difficult to select the upper text within the covered area. I have considered using z-index to bring the UPPER text to the front but wondered if there was a solution using line-height alone or another method.
I also attempted to use user-select: none to prevent text selection altogether, however, this prevented any text from being selected, including the highlighted area.
Thank you
EDIT: Making adjustments such as adding
.lower::selection { background: none; }position:relative; to .lower resolved this issue.