余白(paddingとmargin)

余白を指定する際の注意点

余白の指定方法

余白を指定する際のCSSにはpaddingとmarginがあり、paddingは背景色や枠線を含めた対象領域の内側、marginは対象領域の外側に余白を設ける際に使用します。

---

paddingとmarginはそれぞれ「padding:（余白を指定する値）」「margin:（余白を指定する値）」と記述しまして、値の指定方法はいくつかありますが、当マニュアルでは指定した値がそのまま大きさに反映する pxでの設定方法を解説しています。

---

参考：余白の指定方法はpx以外にem、%などがあり、emは指定した領域に設定されているフォントサイズと指定した値の掛け合わせ、％は指定した値と親となる要素で指定されている領域の高さや横幅の掛け合わせで反映します。

記述例

余白は上下左右を指定ができ、上に10px、右に20px、下に30px、左に40pxの余白を設ける場合は下記のように記述します。

---

大見出しの余白で、上に10px、右に20px、下に30px、左に40pxの余白を設ける際のコードです。

.headline-h2 {
 padding-top : 10px ; /*背景色や枠線を含めた領域の内側で上に10pxの余白を設定*/
 padding-bottom : 20px ; /*背景色や枠線を含めた領域の内側で右に20pxの余白を設定*/
 padding-left : 30px ; /*背景色や枠線を含めた領域の内側で下に30pxの余白を設定*/
 padding-right : 40px ; /*背景色や枠線を含めた領域の内側で左に40pxの余白を設定*/
}

.headline-h2 {
 margin-top : 10px ; /*背景色や枠線を含めた領域の外側で上に10pxの余白を設定*/
 margin-bottom : 20px ; /*背景色や枠線を含めた領域の外側で右に20pxの余白を設定*/
 margin-left : 30px ; /*背景色や枠線を含めた領域の外側で下に30pxの余白を設定*/
 margin-right : 40px ; /*背景色や枠線を含めた領域の外側で左に40pxの余白を設定*/
}

---

---

上下左右の指定を1行のコード内で行うこともでき、値をスペースで区切って4つ記述すると上、右、下、左と上から時計回りに反映されます。

---

記述例

paddingで上に10px、右に20px、下に30px、左に40pxの余白を設ける場合のコード。

.headline-h2 {
padding : 10px 20px 30px 40px ; /*背景色や枠線を含めた領域の内側で上下左右に20pxの余白を設定*/
}

また、top、bottom、right、leftを用いずに記述する場合には4辺で同じ値の余白を設けることができます。

.headline-h2 {
padding : 20px ; /*背景色や枠線を含めた領域の内側で上下左右に20pxの余白を設定*/
}

記述例ではpaddingで記載していますがmarginも同様です。

余白指定の際の注意点

Webサイトは様々なデバイスで閲覧されますので、余白はデバイス毎に表示が崩れていないかも確認しながら設定して下さい。

余白を指定する値

各pxによる見え方の違いは下記の通りです。

---

内側にそれぞれ1pxずつ余白を設定（padding:1px;）

内側にそれぞれ5pxずつ余白を設定（padding:5px;）

内側にそれぞれ10pxずつ余白を設定（padding:10px;）

内側にそれぞれ30pxずつ余白を設定（padding:30px;）

---

---

CSSでの設定はコードの記述をご自身の判断で行えるユーザー様向けの機能です。 ご留意ご利用にあたってはCSSマニュアルの使い方でご案内している注意事項をご理解の上で、ご自身の判断でお使いください。 コードに関して個別のご案内が必要な場合は、お見積りの上、当社で設定を代行することになりますので、ご入用でしたらお問い合わせフォームよりご連絡ください。