余白
padding
要素の内側の余白を指定する
| value | description |
|---|---|
4px | 上下左右の padding を指定する |
4px 6px | 上下、左右の padding をそれぞれ指定する |
4px 6px 8px 12px | 上、右、下、左の padding をそれぞれ指定する |
Demo
0px
2px
4px
8px
<div class="wrapper">
<div class="box box-1">
<div class="inner-box">
0px
</div>
</div>
<div class="box box-2">
<div class="inner-box">
2px
</div>
</div>
<div class="box box-3">
<div class="inner-box">
4px
</div>
</div>
<div class="box box-4">
<div class="inner-box">
8px
</div>
</div>
</div>
.box-1 {
padding: 0;
}
.box-2 {
padding: 2px;
}
.box-3 {
padding: 4px;
}
.box-4 {
padding: 8px;
}
.inner-box {
width: 100%;
height: 100%;
background: rgb(126, 197, 227);
color: rgb(51, 51, 51);
font-size: 14px;
font-family: monospace;
border: 1px solid rgb(51, 51, 51);
border-radius: 2px;
display: flex;
align-items: center;
justify-content: center;
}
.box {
background: rgb(131, 173, 131);
border: 1px solid rgb(51, 51, 51);
border-radius: 2px;
}
.wrapper {
display: grid;
gap: 8px;
grid-template-columns: repeat(4, 1fr);
}
概要
要素の内側の余白を指定します。ここでいう内側とは、枠線（border）の内側を指します。
marginとの使い分けについては余白のスタイリングをご覧ください。
指定する値
| value | description |
|---|---|
4px | 1 つの値が指定された場合、上下左右全てに同じ大きさの padding を設定します |
4px 6px | 2 つの値が指定された場合、1 つ目の値が上下、2 つ目の値が左右の padding に設定されます |
4px 6px 2px 8px | 4 つの値が指定された場合、順に上、右、下、左の padding に設定されます（時計回りの順です） |
padding を個別に指定する
padding を個別に指定するには、padding-top, padding-right, padding-bottom, padding-leftを利用します。
.box {
padding-top: 4px;
padding-right: 8px;
padding-bottom: 12px;
padding-left: 16px;
}
/* 以下と等価 */
.box {
padding: 4px 8px 12px 16px;
}
注意事項
<tr>, <thead>, <tbody>などのテーブル関連のタグに対しては利用することはできません。
テーブル関連の余白スタイリングについてはTable の スタイリングをご覧ください。