margin-block を使って消すのが最も効率的そうだ。
デフォルト
この文章はデフォルトのline-heightを使用しています。上下の余白が存在します。複数行になった場合、行間は一定ですが、上下の余白が目立ちます。
修正済み
この文章は修正済みのline-heightを使用しています。上下の余白が消えています。複数行になった場合、行間は一定で、上下の余白も調整されています。
.container {
max-width: 800px;
margin: 0 auto;
}
.box {
border: 1px solid #ccc;
padding: 20px;
margin-bottom: 30px;
}
.box h2 {
margin-top: 0;
margin-bottom: 15px;
padding-bottom: 5px;
border-bottom: 1px solid #ccc;
}
.content {
padding: 10px;
background-color: #f0f0f0;
}
.box p {
line-height: 3;
max-width: 100%;
margin: 0;
}
.fixed .content {
background-color: #e0ffe0;
}
.fixed p {
margin-block: calc((1em - 1lh) / 2);
}
.highlight {
background-color: #fff;
display: inline-block;
padding: 0 5px;
}