【CSS】margin/paddingの上右下左の順番の覚え方(TIPs)

Rails・Webシステム開発
Anja🤗#helpinghands #solidarity#stays healthy🙏によるPixabayからの画像
スポンサーリンク

web系のバックエンドエンジニアだと、CSSは書くより読む方(+変更)が多いかもしれません。

そんな中で、borderの外側の余白を指定するプロパティ

margin: 2px 3px 4px;

とか、borderの内側の余白を指定するプロパティ

padding: 5px 10px;

とかを見て、上下左右をそれぞれどれで指定しているかパッとわかりますか?

まあ、パッと見てわからなければググれば良いんですが、毎度ググるのも面倒。ということで、その順番を覚えてしまいましょう。

大丈夫です、基本をひとつ押さえれば、あとは考え方の応用なので、簡単に覚えられますよ♪



4つ全指定の場合は上→右→下→左

4つ全て指定されている場合は、上→右→下→左の順です。

margin: 1px 2px 3px 4px;

→上が1px, 右が2px, 下が3px, 左が4px

これが基本です。原則、これを押させておきましょう。

要するに上から時計回りです。

これさえ覚えてしまえば、後は応用です。



3つ指定の場合は上→右→下(→左)

4番目の「左」が省略されていると考えます。そして「左」を省略した場合は「右」(2番目)と同じ値が当てられます。

margin: 1px 2px 3px;

→上が1px, 右が2px, 下が3px(, 左が2px)←省略されている

左右で同じ値を指定したいことはよくあると思うので、自然な流れですよね。

指定している順に、上、左右、下の順番に並んでいるわけですが、これだと私は覚えにくかったので、上記のような考え方をすることにしました。

2つ指定の場合は上→右(→下→左)

3, 4番目の「下」「左」が省略されていると考えます。「下」を省略した場合は「上」(1番目)と同じ値が当てられます。

margin: 1px 2px;

→上が1px, 右が2px(, 下が1px, 左が2px)←省略されている

上下で同じ値を指定したいことはよくあると思うので、自然な流れですよね。

上下、左右の順番に並んでいるので、これはわかりやすいかもしれません。

1つ指定の場合は上(→右→下→左)

2, 3, 4番目の「右」「下」「左」が省略されていると考えます。「右」を省略した場合は「上」(1番目)と同じ値が当てられます。

margin: 1px;

→上が1px(, 右が1px, 下が1px, 左が1px)←省略されている

まあ、これはこんな覚え方しなくてもなんとなくわかるというか、これ以外ないので、この考え方をする必要はないかもしれませんが、一応、この考え方の延長でも説明できるよ、ということで紹介してみました。

まとめ

わざわざこんな覚え方をしなくても覚えてるよ、という方には不要かもしれませんが、「そんな考え方もあるんだ!」ということでご査収いただければ幸いです。(そういう趣旨のブログなので。)

総じて言えるポイントは、省略されているだけで、指定されている!ということですね。

右の余白だけ変更したくて、3つ指定されているうち2番目を変更したら左の余白も変わってしまってあれれ?ということにならないよう、お気をつけください。

一部だけ指定したい場合は、下記プロパティを使用しましょう。

  • 上だけ指定・・・margin-top/padding-top
  • 下だけ指定・・・margin-bottom/padding-bottom
  • 左だけ指定・・・margin-left/padding-left
  • 右だけ指定・・・margin-right/padding-right

この記事がお役に立てれば幸いです。

はるすと
はるすと

最後まで読んでくださってありがとうございました!

この記事を書いた人
こもれびエンジニア

自然と自由を愛するエンジニア。2021年1月に、大手製造業設計からプログラマ(Rails, AWS)へ転職。動物や自然との触れ合いや、汗を流すのが好き。

/HSP(繊細さん)/18デリケートな象/ストレングスファインダー(1分析思考/2親密性/3学習欲/4調和性/5収集心)、テニス、合気道、登山、あいだみつを、ジブリ、ワンピース、ドラゴンボール、AWS、Ruby on Rails、アイミング

twitterをフォローして、記事にならないちょっとした豆知識もチェック!
Rails・Webシステム開発
スポンサーリンク
SNSでシェア/コメントして、自分のアウトプット/発信力を高めるのにお使いください。 ↓ 各ページへジャンプ ↓
twitterをフォローして、記事にならないちょっとした豆知識もチェック!
スポンサーリンク
「そんなか」サイト

コメント

タイトルとURLをコピーしました