Help us understand the problem. What is going on with this article?

フロントエンドのプロ直伝! CSS余白設定の三原則(+線の引き方)

More than 1 year has passed since last update.

前置き

CSSでの余白の取り方について、後輩に「margin-topとmargin-bottomどっち派ですか?」と聞かれたので、
回答内容を記事として残します。

昔、会社のOJTで学んだことの共有となります。

原則

1. 基本的にmargin-topを使う

理由としては、そちらの方が後々調節しやすいからです。
また、後述の優先度で設定していけば、margin-bottomの出番はほぼなくなります。

2. どうしても無理な場合にbottomを使う

margin-bottomは他の方法ではどうしても設定が無理なケースのみ使いましょう。

3. 隣接セレクタをうまく使うとトルツメしやすい

特定の要素同士が並んだ時だけマージンを取る=余白の打ち消し設定が不要になります。

設定の優先度

要素がいくらネストしても下記の優先度は変わりません。
この優先度で余白を設定していけば、margin-bottomの出番はほぼ無くなります。

  1. 親要素のpaddingで周囲(上下左右)の余白を取る。
  2. 1の設定では不可能な、子要素間の余白をmargin-topで取る。

隣接セレクタの使い方

主に<li><section>の繰り返しで列挙する場合に使います。
トルツメを考慮する場合に出番が多くなります。

Bad

特定のクラスに一律でmargin-topを設定した上で打ち消している

.item {
  margin-top: 10px
}

.item:first-child {
  margin-top: 0;
}

Good

同一の要素間の余白を取りたい場合は隣接セレクタを使うのが適切。

.item + .item {
  margin-top: 10px;
}

※同一の要素でない場合でも使えます。

.section + .special-section {
  margin-top: 30px;
}

模式図

Chromeのdevツール上では下記のような余白のとり方となります。
(devツール上の配色と同じ色にしています)

  • #bdc87f : padding
  • #f8c696 : margin

スクリーンショット 2019-07-04 午前10.39.15.png

備考

  • 横に並べる場合の左右の余白についても同様に、原則として margin-left(左余白)を使います。
    • 要素間の余白は隣接セレクタ + margin-left で設定します。
  • 以上の考え方はborder設定にも応用できます。
    • 親要素のborderで周囲の枠線を引く
    • 要素間の横線 / 縦線は border-top / border-left で設定する
yama-t
CBcloud株式会社所属。「PickGo」を開発するエンジニア。 フロントエンドエンジニアだったがRailsはじめました。 言語:HTML, CSS, JavaScript, Ruby, 多少のScala フレームワーク: Vue, AngularJS, Rails PickGoについて: https://pickgo.town/
https://cb-cloud.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした