余白の調整1

余白の概念を学ぶときに混乱してしまうのが、

padding と margin である。

border-style で文字を囲ったことを考えてみると、

◉padding

boderの内側の余白を調整

◉margin

borderの外側の余白を調整

また、borderの内側には背景（background）をつけることができる。

結果としては、同じになることもあるが、

都度、

今padding/marginどちらのほうがベストなのか、

位置関係を考えると理解しやすくなるかもしれない。

 ◉padding のプロパティ

　● 上下左右　：　padding

　● 上　　　　：　padding-top

　● 下　　　　：    paddibng-bottom

　● 左　　　　：    padding-left

　● 右 　   　　：   padding-right

値をスペースで区切ることで、「border-width」同様、

余白もそれぞれ変えることができる。　

　● 上下左右　　 :　  padding: 10px;

　● 上下 左右       :      padding: 10px 5px;

　● 上 左右 下      :     padding: 10px 5px 20px;

　● 上 右 下 左     :     padding: 10px 5px 20px 15px;

　　　※４種類指定する場合は上から時計回り！！

◉margin のプロパティ

　● 上下左右　：　margin

　● 上　　　　：　margin-top

　● 下　　　　：    margin-bottom

　● 左　　　　：    margin-left

　● 右 　   　　：   marign-right

値をスペースで区切ることで、「border-width」同様、

余白もそれぞれ変えることができる。

　● 上下左右　　:　  margin: 10px;

　● 上下 左右      :      margin: 10px 5px;

　● 上 左右 下     :      margin: 10px 5px 20px;

　● 上 右 下 左    :      margin: 10px 5px 20px 15px;

　　　※４種類指定する場合は上から時計回り！！