<p>margin-block を使って消すのが最も効率的そうだ。</p>
<div class="codepen" data-height="700" data-default-tab="result" data-slug-hash="LYoRXLp" data-pen-title="Line-height Margin Demo" data-editable="true" data-user="2001Y"  data-prefill='{"title":"Line-height Margin Demo","tags":[],"scripts":[],"stylesheets":[]}'>
  <pre data-lang="html">  <div class="container">
    <div class="box">
      <h2>デフォルト</h2>
      <div class="content">
        <p><span class="highlight">この文章はデフォルトのline-heightを使用しています。上下の余白が存在します。複数行になった場合、行間は一定ですが、上下の余白が目立ちます。</span></p>
      </div>
    </div>
    <div class="box fixed">
      <h2>修正済み</h2>
      <div class="content">
        <p><span class="highlight">この文章は修正済みのline-heightを使用しています。上下の余白が消えています。複数行になった場合、行間は一定で、上下の余白も調整されています。</span></p>
      </div>
    </div>
  </div></pre>
  <pre data-lang="css" data-option-autoprefixer="true">.container {
  max-width: 800px;
  margin: 0 auto;
}
<p>.box {<br>
border: 1px solid #ccc;<br>
padding: 20px;<br>
margin-bottom: 30px;<br>
}</p>
<p>.box h2 {<br>
margin-top: 0;<br>
margin-bottom: 15px;<br>
padding-bottom: 5px;<br>
border-bottom: 1px solid #ccc;<br>
}</p>
<p>.content {<br>
padding: 10px;<br>
background-color: #f0f0f0;<br>
}</p>
<p>.box p {<br>
line-height: 3;<br>
max-width: 100%;<br>
margin: 0;<br>
}</p>
<p>.fixed .content {<br>
background-color: #e0ffe0;<br>
}</p>
<p>.fixed p {<br>
margin-block: calc((1em - 1lh) / 2);<br>
}</p>
<p>.highlight {<br>
background-color: #fff;<br>
display: inline-block;<br>
padding: 0 5px;<br>
}</pre></div></p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<p>source: <a href="https://x.com/tak_dcxi/status/1794211600330858868">https://x.com/tak_dcxi/status/1794211600330858868</a></p>

2001Y@Y20010920T

line-height 上下の余白を消すメモ