padding-bottom

CSSでは、ボックス下の内側に余白を設けることができます。

本ページでは、padding-bottomプロパティについて説明します。

padding-bottomプロパティとは

padding-bottomプロパティを使うと、ボックス下の内側に作る余白(パディング領域)の大きさを指定できます。

四角い箱の中にコンテンツと表示されて枠があります。その枠の下に矢印があり、四角い箱まで伸びています。その矢印の横には、padding-bottomと表示されています。

パディング領域は、ボーダー領域(枠線の部分)の内側に設けられるため、コンテンツとボーダー領域の間隔を空けることができます。

padding-bottomの定義は、以下のとおりです。

【padding-bottomの定義】
length | percentage | inherit
初期値 0
適用対象 すべての要素(table-row-group、table-header-group、table-footer-group、table-row、table-column-group、table-columnを除く)
継承 しない

値の説明

以下は、padding-bottomで使える値と説明です。

length
数値と単位で指定します。マイナスは使えません。
percentage
パーセントで指定します。マイナスは使えません。親要素の横幅×パーセントがパディング領域になります。

利用例

利用例を示すために、以下のHTMLを使います。

【padding-bottomの利用例を示すためのHTML】
<div class="test">
テストです。
</div>

padding-bottomの利用例は、以下のとおりです。

【padding-bottomの利用例】
.test {
  padding-bottom: 50px;
  border: solid;
}

上記は、以下のように表示されます。

四角い枠線の中に下の間隔を50px空けて、「テストです。」と表示されています。

下の枠線とコンテンツの間は、かなり開いています。

また、以下のようにも使えます。

【パーセントの利用例】
.test {
  padding-bottom: 10%;
}

これは、親要素の横幅にパーセントを掛けたものになるため、親要素の横幅(この例ではブラウザの横幅)に応じて間隔が変わります。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目 IE Ed Fx Ch Sa Op
padding-bottom
【スマートフォン】
項目 Sa An Op Ch Fx Sm
padding-bottom
サポート
制限あり
×
未サポート
不明
IE
Internet Explorer
Ed
Edge
Fx
Firefox
Ch
Chrome
Sa
Safari
Op
Opera
An
Android Browser
Sm
Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。

サイト内で関連ページをチェック

ホームページ作成「ボックスモデル

CSSプロパティ一覧」に戻る