閉じる
閉じる

あまめも

<p>タグの改行(余白)を調整したい時は【初心者用】

info

こんにちは! あますた(@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>

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

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

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

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

外側に大枠があり、中に段落的な物がある状態

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

関連記事

  1. 09152021-thumbnail

    phpで日本語urlをエンコードorデコードする簡単な方法

  2. HPでライン風の対話型吹き出しの表示に枠を付けたい!!ってなった…

  3. サイトデザイン

    「サイトでキーワードを目立つ様に囲みたい!」そんな時はcssでク…

  4. 【HTML】サイトで漢字にルビ(読み仮名)ふりたいんだけどなんて…

  5. info

    サイトに情報追加した時は<ins>タグで追加した部分…

  6. タイプライター

    文字の間隔を設定したいそんな時の設定方法

こんなメモもありますよ♪

  1. 翻訳info

Twitter

ページ上部へ戻る