全ての要素はボックスと呼ばれる四角い領域を持ちます。ボックスの境界線上には枠線があり、枠線の外側の余白と枠線の内側の余白に分かれています。
ボックスモデルでも書いたように余白は枠線の外側と内側に分かれています。外側の余白は「margin」プロパティ、内側の余白は「padding」プロパティを用い、「px」などの数値で指定します。
余白の指定方法はいくつか書き方があります。
margin: 20px; | 上下左右全て20pxの余白が入る |
margin: 20px 30px; | 上下20px、左右30pxの余白が入る |
margin: 20px 30px 35px 15px; | 上20px、右20px、下30px、左15pxの余白が入る |
margin-top: 20px; | 上のみ20pxの余白が入る |
margin-right: 30px; | 右のみ30pxの余白が入る |
margin-bottom: 35px; | 下のみ35pxの余白が入る |
margin-left: 15px; | 左のみ15pxの余白が入る |
「padding」プロパティの指定方法も「margin」プロパティと同じです。バラバラの数値を一括指定する場合、上→右→下→左と時計回りに指定することを覚えておきましょう。
「margin」プロパティで左右に「auto」を設定すると、その要素を中央に配置できます。「auto」を指定する時には「width」プロパティを合わせて指定する必要があり、また上下に「auto」を指定することはできません。