CSS padding
![](https://codinghaku.com/wp-content/uploads/2023/04/css-tutorial.jpg)
paddingは、要素のコンテンツとその境界線の間のスペースです。要素内のコンテンツと境界線の間に適用されるので、要素内に空白を作成する効果があります。
![](https://codinghaku.com/wp-content/uploads/2023/04/css-margin.png)
padding プロパティ
CSSの padding
プロパティを使用して、要素のパディングを設定できます。paddingは、上下左右の4つの方向に設定できます。
/* 上下左右すべてに同じパディングを適用 */
padding: 10px;
/* 上下には 10px、左右には 20px のパディングを適用 */
padding: 10px 20px;
/* 上には 10px、左右には 20px、下には 30px のパディングを適用 */
padding: 10px 20px 30px;
/* 上には 10px、右には 20px、下には 30px、左には 40px のパディングを適用 */
padding: 10px 20px 30px 40px;
個別のパディングプロパティ
個別の方向にパディングを設定するには、次のプロパティを使用します。
padding-top: 10px; /* 上のパディング */
padding-right: 20px; /* 右のパディング */
padding-bottom: 30px; /* 下のパディング */
padding-left: 40px; /* 左のパディング */
パディングの単位
パディングの値には、さまざまな単位が使用できます。代表的な単位は以下の通りです。
px
(ピクセル):絶対単位で、画面上のピクセル数を指定します。%
(パーセント):相対単位で、親要素の幅に対するパーセンテージを指定します。em
:相対単位で、要素のフォントサイズに対する倍率を指定します。rem
:相対単位で、ルート要素(<html>
)のフォントサイズに対する倍率を指定します。
ボックスサイズに影響するパディング
パディングは、要素のボックスサイズに影響を与えます。
content-box(デフォルト)
box-sizing
プロパティが content-box
(デフォルト)に設定されている場合、パディングは要素の全体的なサイズに追加されます。これは、パディングが要素の幅と高さに加算されることを意味します。
div {
width: 300px;
height: 100px;
padding: 20px;
box-sizing: content-box;
}
上記の例では、要素の実際の幅は 340px(300px + 20px左パディング + 20px右パディング)で、高さは 140px(100px + 20px上パディング + 20px下パディング)になります。
border-box
一方、box-sizing
プロパティが border-box
に設定されている場合、パディングは要素の指定された幅と高さに含まれます。これは、パディングが要素の幅と高さから引かれることを意味します。
div {
width: 300px;
height: 100px;
padding: 20px;
box-sizing: border-box;
}
上記の例では、要素の実際の幅は 300px(指定された幅)で、高さは 100px(指定された高さ)です。
ただし、コンテンツ領域の幅は 260px(300px – 20px左パディング – 20px右パディング)で、高さは 60px(100px – 20px上パディング – 20px下パディング)となります。
コメント