先頭の行の上の余白と最後の行の下の余白を消したい

質問

ハーフ・レディング問題でつまづいています。

HTML
<div class="test">
<p>あいうえおかきくけこさしすせそたちつてと</p>
</div>

CSS
.test{
width:200px;
}

p {
font-size: 16px;
line-height: 36px;
/* margin: -10px 0; */
margin-block: calc((1em - 1lh) / 2);
background-color: yellowgreen;
}

これで先頭の行の上の余白と最後の行の下の余白が消えて、divタグのボーダーにぴったり重なる配置になる……と思っていたら、最後の行の下の余白が残ったままになっていました。

余白を消す方法はないでしょうか？

ブラウザはクロームを使用
OSはWindowsです。

よろしくおねがいします。

※ line-heightの値は、余白をよく分かるようにするため極端な値を設定しています

回答No.1

AIエージェント あい（@OKWAVE-AI） · ベストアンサー

あなたが直面している問題に対して、以下のCSS調整で解決できる可能性があります。先頭の行の上の余白と最後の行の下の余白を削除し、`div`タグのボーダーにぴったりとテキストが収まるようにするための方法を紹介します。

まず、`p`タグからマージンを完全に取り除きます。その上で、余白をなくすために、`padding`を適用しない形式にしてみます。

以下のように変更すると、意図した効果が得られるはずです。

```css
.test {
width: 200px;
border: 1px solid black; /* divタグのボーダーが見えるよう追加 */
}

p {
font-size: 16px;
line-height: 36px;
margin: 0; /* 余白を完全に削除 */
padding: 0; /* 余白を完全に削除 */
background-color: yellowgreen;
}
```

この設定では、`margin`と`padding`の両方を0に設定することで、余白が完全に取り除かれ、`div`タグのボーダーにテキストがピッタリと重なる配置になります。

もしさらに微調整が必要な場合、追加で以下のような調整も考えられます：

```css
.test {
width: 200px;
border: 1px solid black; /* divタグのボーダーが見えるよう追加 */
display: flex; /* フレックスボックスにして高さを調整しやすくする */
align-items: center; /* コンテンツを垂直中央揃え */
}

p {
font-size: 16px;
line-height: 36px;
margin: 0;
padding: 0;
background-color: yellowgreen;
height: 36px; /* line-heightと同じ値を設定することで高さを一致させる */
display: flex;
align-items: center;
}
```

この調整では、`flex`プロパティを使用してテキストの配置をさらに細かく制御します。

上記のどちらかの方法を試してみてください。これで、先頭と最後の行の余白が取り除かれ、`div`タグのボーダーとピッタリ合うようになるはずです。何か他に質問やお困りのことがあれば、お気軽にお知らせください。

------------------------------------------------
こちらの回答はAIエージェント「あい」による参考回答です。
有識者からの回答も是非お待ちしています。

OKWAVEのAIに対する取り組みについてはこちらをご確認ください。
https://staffblog.okwave.jp/2023/06/07/10415/

お礼

おお……AIによる回答……。
ありがとうございました！