マージン・パディング
「padding」プロパティ
「padding」プロパティは、ボックス要素の内側の余白をまとめて指定するCSSプロパティです。
ボックス要素の内側の余白を指定する値は、「上」「下」「左」「右」などの指定ができます。
「padding」プロパティの値
ボックス要素の内側の余白をまとめて指定する単位は「px」「%」「em」「rem」などの値を指定することができます。
※ブラウザの種類により、小数点以下の数値は切り上げされる場合がありますので小数点での指定は推奨できません。
上下左右をまとめてひとつの値を指定することもできますが、異なる余白幅にする場合は、スペースで区切って複数の値を指定します。
CSSでサイズ指定する単位「px」「%」「em」「rem」の違いと使い分け
「padding」プロパティの指定方法
ボックス要素の内側の余白をまとめて指定する場合は、「padding」プロパティを使い適応する値を指定することで実装できます。
「padding」プロパティ
セレクタ{
padding:ボックス要素の内側の余白;
}値例
/* px値 */
padding: 10px;/* 上下左右10pxの余白 */
padding: 10px 20px;/* 上下10px 左右20pxの余白 */
padding: 10px 20px 30px 40px;/* 上10px 右20px 下30px 左40pxの余白 */
/* %値 */
padding: 5%;/* 上下左右5%の余白 */
padding: 5% 10%;/* 上下5% 左右10%の余白 */
padding: 1% 2% 3% 4%;/* 上1% 右2% 下3% 左4%の余白 */
/* em値 */
padding: 5em;/* 上下左右5emの余白 */
padding: 5em 10em;/* 上下5em 左右10emの余白 */
padding: 1em 2em 3em 4em;/* 上1em 右2em 下3em 左4emの余白 */
/* rem値 */
padding: 5rem;/* 上下左右5remの余白 */
padding: 5rem 10rem;/* 上下5% 左右10%の余白 */
padding: 1rem 2rem 3rem 4rem;/* 上1rem 右2rem 下3rem 左4remの余白 */表示例
ボックス要素の外側の余白（上下左右10px）
ボックス要素の外側の余白（上下5% 左右10%の余白）
ボックス要素の外側の余白（上1em 右2em 下3em 左4em）
