スタッフブログStaffblog

新入社員の立原です。

今回はCSSのちょっとした早業についてご紹介します。
CSSには沢山のタグが存在し、その中にpadding、border、marginという、タグがあります。
paddingは要素の内側の余白、borderは素材を縁取る枠、marginは素材の外側余白、となります。

marginを例として説明していきます。書き方は

margin: 数字（上）　数字（右）　数字（下）　数字（左）;

というように時計回りに文字を入れていく形になります。

例　　下に20px余白を作る場合
margin: 0 0 20px 0;

この際、0のときは必要ありませんが、それ以外の場合では単位をつけていきます。
ここからメインの早業について説明していきます。
実はこのタグに記載する数字は、左右が同じ数字の場合、全て同じ数字の場合は簡略化して書くことができます！
ですが上下が同じの場合は使えないので注意が必要です。

例　　上が10px、左右が5px、下が20pxの場合
margin: 10px 5px 20px;

例　全て30pxの場合
marigin: 30px;

でOKです！