閉じる
閉じる

あまめも

<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. お店の「お知らせ」を開いたら記事ページに飛ぶようにした方が良いん…

  2. list

    <ol>リストを好きな番号から連番にしたい時

  3. アイコン

    HTMLで簡単に拡張子に合ったアイコンを設定する方法【css】

  4. ブログにYouTube動画を載せたら領域をはみだすのでレスポンシ…

  5. take088-thumbnail

    【WaznFilm更新】フリーアイコンはここで決まり!クオリティ…

  6. WordPressで画像を挿入する時に勝手にリンクが貼られるので…

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

  1. 映画『仮面病棟』
  2. 立て看板

Twitter

ページ上部へ戻る