閉じる
閉じる

あまめも

<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. インフォ

    画面のサイズに合わせて拡大縮小する画像の簡単なCSS設定

  2. edit

    「Git」のコミットメッセージを間違えた、そんな時の修正方法

  3. [甘]ブログの見出しのデザインが気になったから少し調べてみた。

  4. [甘]とりあえず、グローバルメニューの作成完了?

  5. 色々とあったのでWordPressをエディタで書こうとしてとりあ…

  6. take089-thumbnail

    WaznFilm更新】「Font Awesomeで何ができるの?…

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

  1. パン

Twitter

ページ上部へ戻る