CSSの基礎で一番解りにくいのが、marginとpaddingの違いです。
margin
marginとは要素の外側に出来る隙間の事です。
padding
paddingとは要素の内側に出来る隙間です。
言葉にすると一見簡単に思えますが、実際にレイアウトしてみるとシンプルなレイアウトではどちらでも結果として思い通りの形になるケースが多いため、上手く使い分けが出来ないままなんとなく使い続け、いざ複雑なレイアウトを始めると、使い分けが出来ていないせいで苦労する、というケースをよく目にします。なので、今のうちからmarginとpaddingの違いをしっかりと理解しておきましょう。
marginとpaddingは共に４つの方向別に指定する事が出来ます。
margin-top
margin-bottom
margin-left
margin-right
padding-top
padding-bottom
padding-left
padding-right
また、ショートハンドという省略した形でコーディングしていく機会も多いので、ショートハンドの形も一緒に覚えて行きましょう。
border ・・・ ボーダーのスタイル・太さ・色を指定する
borderプロパティは、ボーダーのスタイル・太さ・色をまとめて指定する際に使用します。 スタイル・太さ・色のうち、指定する値を任意の順序でスペースで区切って記述します。
borderは指定出来る事が多く、一度にすべてを覚えるのは大変です。最初はよく使用する物に限定して覚えて行きましょう。
borderの種類
solid＝1本線で表示されます。
dashed＝破線で表示されます。
dotted＝点線で表示されます。
borderの幅
pxで指定
borderの色
文字色や背景色と同様、カラーコードやカラーネームで指定します。
borderもmarginとpadding同様ショートハンドでの指定が一般的なので、ショートハンドでの指定を覚えておきましょう。
例
h1 {
border:solid 3px #FF0000;
}
コメント