HTML/CSS基礎シリーズ③　スペースを空ける marginとpadding

CSSで対象物に対してスペースを空ける方法です。

これもCSSの基礎で、物の場所を移動したり、調整したりするのに必ずと言っていいほど使います。

marginとpaddingのルール

動画でも説明してますが、marginやpaddingの例は、
margin: 10px;　　１つだと　全方向
margin: 10px 0px;　　２つだと　上下　左右
margin: 20px 10px 20px;　　３つだと　上　左右　下
margin: 200px 0px 0px　10px;　　4つだと　上　右　下　左
というルールです。

単位はpxのほかに、mm,cm,in,pt,pc,em,ex,% など、様々なもので指定できますね。

またautoでmarginを自動的に設定する事もあります。
margin: 0px auto 0px;　という風に、両サイドを自動化して、中央寄せする時に良く使いますね。

参考リンク

• CSS： marginの正しい理解
• margin、paddingとは？：CSS入門
• パーセント指定とpx固定値の組み合わせを活かすCSS3プロパティ