行の高さを持つインラインスパンの周囲に1つの連続したアウトライン

Question

<p>と<div>の間にネストされた<span>を囲む1つの連続したアウトラインを設定することが目標です。私はこの解決策を見つけました：CSS/Javascript: How to draw minimal border around an inline element?これは、どの要素にも線高さが設定されていない場合にのみ機能します。私のラインの高さを維持しながら、単一のアウトライン（写真）を描くことは可能ですか？ mockup of desired result

は、ここに私のコードです：

.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>

あなたは行の高さのプロパティがコメントアウトされている場合、必要に応じて、輪郭が振る舞うことがわかります。このプロパティは以下のスニペットでコメントアウトされています。

.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

増加した行の高さ

.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>

を調整するためにnote_text_themeにパディングを追加します。