余白はデザインにとって欠かせないものです。
ここではその余白をWebデザインではどのように調整するかを書いています。
余白は「margin」と「padding」
余白には margin (マージン) と padding (パディング) があります。
要素（テキストや画像などの情報）を入れ物に例えます。
その入れ物の外側の余白の距離をmarginで表します。
入れ物の内側の余白の距離をpaddingで表します。
marginの使い方
まとめて調整する方法
要素の外側の余白の四辺をまとめて調整する方法は以下になります。
| 書き方 | 例 | 説明 |
| margin: 四辺すべて; | margin: 10px; | 要素の外側の四辺に10pxの余白 |
| margin: 上下 左右; | margin: 10px 20px; | 要素の外側の上下に10px、左右に20pxの余白 |
| margin: 上 左右 下; | margin: 10px 20px 30px; | 要素の外側の上に10px、左右に20px、下30pxの余白 |
| margin: 上 右 下 左; | margin: 10px 20px 30px 40px; | 要素の外側の上に10px、右に20px、下30px、左40pxの余白 |
別々に調整する方法
要素の外側の余白を別々に調整する方法は以下になります。
| 書き方 | 例 | 説明 |
| margin-top: 上; | margin-top: 10px; | 要素の外側の上部に10pxの余白 |
| margin-bottom: 下; | margin-bottom: 20px; | 要素の外側の下部に20pxの余白 |
| margin-left: 左; | margin-left: 30px; | 要素の外側の左部に30pxの余白 |
| margin-right: 右; | margin-right: 40px; | 要素の外側の右部に40pxの余白 |
paddingの使い方
まとめて調整する方法
要素の内側の余白の四辺をまとめて調整する方法は以下になります。基本的にはmarginと同じです。
| 書き方 | 例 | 説明 |
| padding: 四辺すべて; | padding: 10px; | 要素の内側の四辺に10pxの余白 |
| padding: 上下 左右; | padding: 10px 20px; | 要素の内側の上下に10px、左右に20pxの余白 |
| padding: 上 左右 下; | padding: 10px 20px 30px; | 要素の内側の上に10px、左右に20px、下30pxの余白 |
| padding: 上 右 下 左; | padding: 10px 20px 30px 40px; | 要素の内側の上に10px、右に20px、下30px、左40pxの余白 |
| 書き方 | 例 | 説明 |
| padding-top: 上; | padding-top: 10px; | 要素の内側の上部に10pxの余白 |
| padding-bottom: 下; | padding-bottom: 20px; | 要素の内側の下部に20pxの余白 |
| padding-left: 左; | padding-left: 30px; | 要素の内側の左部に30pxの余白 |
| padding-right: 右; | padding-right: 40px; | 要素の内側の右部に40pxの余白 |
数値はpx以外も使える
ここでの単位は px (ピクセル) で説明しましたが、他にも 「rem」 や 「％」 などの単位が使えます。
余白に関係するプロパティ
枠線の「border」
枠線は border (ボーダー) と言います。
枠線は margin と padding の間に入ります。
横幅の「width」、高さの「height」
中身の横幅は width (ウィドゥス) と言います。
高さは height (ハイト) と言います。