正しい「空白・スペース」の入れ方

更新日: 2021.12.26

半角スペース1つ分であれば半角スペースでOK。

それ以上の空白の場合は基本的に、marginかpaddingで余白を取る。

CSSをいじれない場合は2or3の方法を使う。

全角スペースは使わない。

  1. cssのmargin、paddingで余白を取る ★おすすめ★
  2. スペースを入れるための特殊文字
    1. 「   」:半角スペースより少し広い空白
    2. 「   」:全角スペースとほぼ同じ大きさの空白
    3. 「   」: の空白より小さい空白
  3. preタグ内
  4. 特殊文字:「 」を複数使う ✕非推奨
  5. 全角スペース ✕非推奨

cssで余白をとる方法をすすめる理由

以下のメリットがあるため。

  • 空白の幅を自由に設定できる
  • どの環境でもエラーが起きない

デメリットとしてはCSSとHTMLを修正する必要があるため、CSSを修正できない場合にはつかえない。

cssで余白をとる際の実装方法

HTMLで空白を開けたいテキストをspanタグなどで囲み、CSSで左右開けたい方にpaddingかmarginを付与する。

ブックマーク

すぐわかる!HTMLでスペースや空白を入れる正しい方法

https://webliker.info/03847/#toc_8