single contiguous outline around inline span with line-height - html

Question

The goal is to set a single contiguous outline around a <span> nested within a <p> and <div>. I found this solution: CSS/Javascript: How to draw minimal border around an inline element? which only works if there is no line-height set on any elements. Is it possible to draw a single outline (pictured) while preserving my line height? mockup of desired result
Here's my code:
.note_text_theme {
outline: 2px solid blue;
outline-style: dashed;
}
.note_text_theme span {
border: 1px solid white;
background-color: white;
position: relative;
z-index: 1000;
}
p {
margin: 10px;
}
.text_paragraph {
font-size: 18px;
line-height: 170%;
}
<div class="text_paragraph">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id lobortis purus. Nunc nibh metus, dictum sit amet mi sed, sagittis fermentum mauris. Mauris tincidunt lectus quam, quis tincidunt mi finibus at. <span class="note_text_theme">Cras feugiat accumsan magna, vel malesuada sem pulvinar nec. Curabitur a sem quis metus sodales rhoncus. Phasellus tempus ante magna, a gravida est pellentesque sed. Nam volutpat tortor nec lobortis aliquam. Fusce ornare pharetra tristique. Cras fringilla, nunc ac lobortis posuere, libero est</span>
<span></span>blandit justo, ut placerat nisl erat viverra odio. Praesent finibus viverra neque, quis feugiat felis porttitor a. Vestibulum ante ipsum primis in faucibus orci luctus.
</p>
</div>
You'll notice that if the line-height property is commented out, the outline behaves as desired. This property is commented out in the snippet below.
.note_text_theme {
outline: 2px solid blue;
outline-style: dashed;
}
.note_text_theme span {
border: 1px solid white;
background-color: white;
position: relative;
z-index: 1000;
}
p {
margin: 10px;
}
.text_paragraph {
font-size: 18px;
//line-height: 170%;
}
<div class="text_paragraph">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id lobortis purus. Nunc nibh metus, dictum sit amet mi sed, sagittis fermentum mauris. Mauris tincidunt lectus quam, quis tincidunt mi finibus at. <span class="note_text_theme">Cras feugiat accumsan magna, vel malesuada sem pulvinar nec. Curabitur a sem quis metus sodales rhoncus. Phasellus tempus ante magna, a gravida est pellentesque sed. Nam volutpat tortor nec lobortis aliquam. Fusce ornare pharetra tristique. Cras fringilla, nunc ac lobortis posuere, libero est</span>
<span></span>blandit justo, ut placerat nisl erat viverra odio. Praesent finibus viverra neque, quis feugiat felis porttitor a. Vestibulum ante ipsum primis in faucibus orci luctus.
</p>
</div>

Answer 1

Add a padding to the note_text_theme to adjust for the increased line-height
.note_text_theme {
outline: 2px solid blue;
outline-style: dashed;
padding: 5px 0px;
}
.note_text_theme span {
border: 1px solid white;
background-color: white;
position: relative;
z-index: 1000;
}
p {
margin: 10px;
}
.text_paragraph {
font-size: 18px;
line-height: 170%;
}
<div class="text_paragraph">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id lobortis purus. Nunc nibh metus, dictum sit amet mi sed, sagittis fermentum mauris. Mauris tincidunt lectus quam, quis tincidunt mi finibus at. <span class="note_text_theme">Cras feugiat accumsan magna, vel malesuada sem pulvinar nec. Curabitur a sem quis metus sodales rhoncus. Phasellus tempus ante magna, a gravida est pellentesque sed. Nam volutpat tortor nec lobortis aliquam. Fusce ornare pharetra tristique. Cras fringilla, nunc ac lobortis posuere, libero est</span>
<span></span>blandit justo, ut placerat nisl erat viverra odio. Praesent finibus viverra neque, quis feugiat felis porttitor a. Vestibulum ante ipsum primis in faucibus orci luctus.
</p>
</div>