余白を上下と左右で書き分ける

01 / 05

小さな部品は余白で決まる

ヘッダーの端に置くリンクやラベルみたいな小さな部品は、文字の量が少ない。だから見た目のほとんどが余白で決まるんだ。

ところが padding: 12px; と書くと4辺ぜんぶ同じ。左右がせますぎて、縦につぶれた感じになりやすい。

.btn {  padding: 12px;}

02 / 05

ここまでの演習で padding: 8px 16px; のような書き方を何度か使ってきたね。あれをきちんと覚えよう。

値を2つ並べると、

つまり 8px 16px は「上下は 8px、左右は 16px」。横に広い部品になるよ。

.btn {  padding: 8px 16px;}

03 / 05

値は4つまで並べられる。4つのときは上・右・下・左の順に1辺ずつ決まる。時計回りに一周する順番だと覚えよう。

padding-top のように4行書くのと同じ意味だけど、1行で済むぶん読みやすい。

.box {  padding: 4px 8px 12px 16px;}

04 / 05

並べ方のルールは margin でも同じだよ。

中央寄せの margin: 0 auto; も、実は「上下は 0、左右は自動」の2値の書き方だったんだ。同じきまりで読めていたことになる。

.tag {  margin: 0 8px;}

05 / 05

0 だけは 0px と書かなくてもいい。ゼロはどの単位でもゼロだからだよ。

padding: 0 12px; と書けば「上下なし、左右 12px」。横に細長い部品を作るときの定番の形になる。ここから書いてみよう。

.tag {  padding: 0 12px;}