余白のスタイル

余白のスタイルを紹介します。枠線(ボーダー)の外側にある余白がマージン、内側にある余白がパディングといいます。

marginプロパティ

他の要素との間隔、つまり外側の余白を指定します。要素が上下に並んでいる場合、大きいマージンが優先されます。
また、上下左右個別に指定する場合は、「margin-top」「margin-left」「margin-right」「margin-bottom」プロパティを使用します。

paddingプロパティ

枠線と内容との間隔、つまり内側の余白を指定します。
また、上下左右個別に指定する場合は、「padding-top」「padding-left」「padding-right」「padding-bottom」プロパティを使用します。

上下左右個別に指定する場合

設定する値の数により、以下のようになります。

値が1つ
上下左右同じ値となります。
値が2つ
上下 左右
値が3つ
上 左右 下
値が4つ
上 右 下 左

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です