ボックスモデル -- ボーダー

要素と他の要素の間の距離はマージンを使用して設定できます。境界は、上、右、下、左に分割することもできます。次のコード:

div{margin:20px 10px 15px 30px;}

は個別に記述することもできます:

div{
   margin-top:20px;
   margin-right:10px;
   margin-bottom:15px;
   margin-left:30px;
}

上下左右の境界線が両方とも 10px の場合は、次のように記述できます:

div{ margin:10px;}

上下の境界線が同じ場合10px、左右の境界線が同じ 20px の場合は、次のように書くことができます:

div{ margin:10px 20px;}

要約すると、パディングとマージンの違いは、パディングは境界線の内側にあり、マージンは境界線の外側にあります。