CSSの余白タグについて

20/04/10

投稿者:DICTUX

新入社員の立原です。

今回は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です!




pページの先頭へ