cBlog

Tips for you.

CSSのmarginやpaddingを指定する順番の覚え方

スポンサーリンク
※当ブログのAmazon、iTunes、サウンドハウス等のリンクはアフィリエイトを利用しています。

f:id:cruller:20170111210546p:plain

Webデザイナーや本で勉強した方は常識かもしれませんが、最近( ゚д゚)ハッとしたことがあるんです。

CSSのmarginやpaddingを4つまとめて指定する際の表記する順番です。

 

全部同じなら当たり前です。

margin: [上下左右];

 

2つの場合も、ふーんソウナンダって感じです。

margin: [上下] [左右];

 

3つの場合は、

margin: 上 [左右] 下;

ナルホドー上下が分かれたんだねー! ダンダンツカメテキタヨー!

 

でも4つになると…

margin: 上 右 下 左;

WHY JAPANESE PEOPLE!?

おかしいだろ! なんで左右が離ればなれになるんだ!!

 

とか思ってたんですが、これって時計回りになっているんですね。

f:id:cruller:20170111210601p:plain

The values are in clockwise order from top.

 

以上、片手間にブログをいじる日曜CSSerのつぶやきでした。

 

CSS小ネタ

CSSだけで背景色を2色にする方法

はてなブログのテーマ「DUDE」をレスポンシブデザインに対応させる

はてなブログのidとclassのツリーと図解を作ってみた

「詳細度」CSSの優先順位は書かれた順番だけではない

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)