こんにちは！ あますた(@amaguristar)です。

• 「<p>タグの余白を調整したいけど分からない」

そんな時はcssで調整可能。

　

<div>タグ内で<p>タグ独特の改行を削除

HTMLを始めたばかりの頃は微妙な調整の仕方が分からなくて大変ですよね。自分もそうでした。

• 「ここの余白無くしたいんだけどどうやったら良いのか分からない」
• 「調べても全然分からない」
• 「似た様な物は見つけたけどそうじゃ無いんだ」

って事が多々あり何度調べるのを止めようと思った事か・・・。自分が最初に思ったのは下記状態。

.sample-waku {
    padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    border: solid 3px #000000;
}

上記cssがある時に

<div class="sample-waku">
<p>外側に大枠があり、中に段落的な物がある状態</p>
</div>

単純に上記を実際に見ると、

こんな感じ。<p>タグ独特の改行が下に出てしまい見た目がいまいち。上記場合は単純に

<p class="sample-waku">〜</p>

と書き直せば問題無く表示されますが、そうできないこともあるかと思います。

そんな時は単純に、cssでmarginを調整しましょう。

.sample-waku p {
    margin-bottom: 0;
}

とすると下記の様に下部の無駄なスペースがなくなります。

スペース系で悩んだらとりあえずcssの『margin』or『padding』を調整すると大抵何とかなります。