margin?padding?border?意味わかんないでちゅー^^
という方も多いと思うので今回はmargin、padding、borderを
詳しく説明します。

特にmargin、paddingはWebサイトを作るとき100%使うので
絶対に理解しておきましょう。

margin、padding、borderとは

「margin」は要素の外側の余白。
「padding」は要素の内側の余白。
「border」はmarginとpaddingの間にある線です。

上の図の要素の中身と書いてある部分はdivやpなどの要素です。
通常はwidthやheightで指定した数値はこの部分のみ反映されます。

サイズの指定の仕方

例えばwidth(横幅)とheight(高さ)が100pxで、marginとpaddingが10pxで
1pxの黒いborderで囲った要素の場合は下記のように書きます。

div {
    width:100px;
    height:100px;
    margin:10px;
    padding:10px;
    border:1px solid #000;
} 

borderの詳しい指定方法は後半で説明します。

上下左右で違うサイズを指定する

余白を上下左右それぞれ違う大きさにしたい場合もあると思います。
その場合は下記のようにそれぞれ指定しましょう。

div {
    width:100px;
    height:100px;
    margin-top:20px;
    margin-bottom:10px;
    margin-right:30px;
    margin-left:40px;
    padding-left:40px;
} 

上記のpadding-left:40pxのように1つだけ指定することも可能です。

しかし、この方法には1つ問題があります。
それはコードの量が増えるということです。
コード量が多ければその分めんどくさいのはもちろん、
データ量が大きくなるので読み込みが遅くなってしまいます。
そこで便利なのが「ショートハンドプロパティ」です。

ショートハンドプロパティ

ショートハンドプロパティとは他の幾つかのCSSプロパティをまとめて1つの
プロパティで指定する事が出来る短縮プロパティの事を指します。
例えば下記の2つのコードはそれぞれ長さは全然違いますが内容は全て同じです。

div {
    width:100px;
    height:100px;
    margin-top:20px;
    margin-right:10px;
    margin-bottom:10px;
    margin-left:20px;
    padding-top:10px;
    padding-right:20px;
    padding-bottom:10px;
    padding-left:20px;
}
p {
    width:100px;
    height:100px;
    margin-top:20px 0 20px;
	margin-left:0;
	margin-right:0;
	margin-bottom:20px;
}

div {
    width:100px;
    height:100px;
    margin:20px 10px 10px 20px;
    padding:10px 20px;
} 
p {
    width:100px;
    height:100px;
    margin:20px 0 20px;
}

はい全然違いますね。
指定するときは上から順に時計回りに指定していきます。
また、上下と左右をそれぞれ同じ値を指定する場合は上下、左右の順に指定します。
そして数値間は半角スペースで区切っていきます。

※これは説明用のコードです。実際のコードには(top)とかは入れないでください。
div {
    width:100px;
    height:100px;
    margin:20px(top) 10px(right) 10px(bottom) 20px(left);
    padding:10px(top,bottom) 20px(right,left);
} 
p {
    width:100px;
    height:100px;
    margin:20px(top) 0(left・right) 20px(bottom);
}

borderの指定方法

こいつは一見難しそうに見えるかもしれませんが、
そんなことはなくただの雑魚なので安心しましょう。

div {
    width:100px;
    height:100px;
    border:1px(線の太さ) solid(線の種類) #000(線の色);
} 

線の太さはmarginやpaddingと同じです。
border-topやborder-bottomのように上下左右の太さを別々に指定できます。

線の色については文字や要素の色指定と同じです。
色の指定方法が分からない方はこちら
CSSって何？CSSの基礎講座[超初心者用]

そしてみなさんが「は?」となる線の種類は
線を破線や二重線にしたりするための指定です。
普通の1本線の場合はsolidです。

それぞれの間は半角スペースで区切りましょう。
ちなみにこの3つの順番はとくに決まっていないので
自由に書いて結構です。
詳しくはこちら
border－スタイルシートリファレンス

inlineには左右の余白しか指定できない

inline要素には、margin、paddingを左右のみしか指定することが出来ません。
正確に言うと、paddingは上下左右指定できるのですが、複数行になった際に
下の行と上の行が重なってしまい表示がおかしくなるのでおすすめはしません。

marginの相殺

marginの相殺とは要素のマージンが垂直に並んだ場合、
大きい数値の方が優先されて小さい方は消される現象のことです。

他にも親要素のマージンと中にある子要素のマージンが
ぶつかり合うと相殺されます。

ちなみに左右の場合は相殺はされません。
20pxと10pxが左右で並んだ場合は30pxになります。
また、paddingは相殺は起きません。

この現象から逃れるために一般的に使われる方法は、
なるべくtopかbottomのどちらか一方向しか指定しないという方法です。

詳しくはこちら
[CSS]マージンの相殺を正しく理解しておこう！相殺はいつ起こるのか、相殺を回避するテクニック | コリス

box-sizing: border-box;

paddingとborderを使うとめんどくさいことが1つあります。
それは全体のサイズの計算がめんどくさいということです。

どういうことかといいますと、最初に説明した通り
widthやheightで指定した値はあくまで要素のみにしか
反映されないので、例えば下記のように書くと

div {
    width:100px;
    height:100px;
    padding:10px;
    border:1px solid #000;
} 

縦横122pxの要素が出来上がります。
(100pxにpadding10px+10px、border1px+1px)

なのでもし縦横100pxでpadding10px、border1pxの
要素を作りたい場合は下記のように書かないといけません。

div {
    width:78px;
    height:78px;
    padding:10px;
    border:1px solid #000;
} 

こんなの毎回計算するのめんどくさいですよね。
そんなめんどうな作業をなくしてくれるのが
「box-sizing: border-box;」です。

この指定をした要素はなんとpaddingやborderのサイズに関係なく
全体のサイズがwidthやheightで指定した数値になります。
なので下記のように先ほど書いたコードにこいつを加えるだけで・・・

div {
    width:100px;
    height:100px;
    padding:10px;
    border:1px solid #000;
    box-sizing: border-box;
} 

あら不思議!たった1行だけで簡単に縦横100pxの要素の完成です!!!
私の場合は毎回指定するのもめんどくさいのでデフォルトで
全ての要素に適用されるようにしてます。

*, *:before, *:after {
     box-sizing: border-box;
}

ちなみにIE 5.5 以前のIEはデフォルトがこの状態でした。
当時他のブラウザはそんな機能搭載してすらいませんでした。
さすがIE!独自路線を思いっきり突っ走ってるぜ!!