Style paddingBottom 属性

定義と使用方法

paddingBottom 属性を設定または返し、要素の下内余白を指定します。

margin 属性 および padding 属性 要素の周りにスペースを挿入しますが、margin は境界線の周りにスペースを挿入し、padding は要素の境界線内にスペースを挿入します。

も参照してください：

CSS 教程：CSS 内側マージン

CSS リファレンスマニュアル：padding-bottom 属性

HTML DOM リファレンスマニュアル：padding 属性

インスタンス

例 1

<div> 要素の下内余白を設定する：

document.getElementById("myDiv").style.paddingBottom = "50px";

自分で試してみてください

例 2

<div> 要素の下内余白を「normal」に戻す：

document.getElementById("myDiv").style.paddingBottom = "0px";

自分で試してみてください

例 3

以下の <div> 要素の下内余白を返します：

alert(document.getElementById("myDiv").style.paddingBottom);

自分で試してみてください

例 4

marginBottom と paddingBottom の違い：

function changeMargin() {
  document.getElementById("myDiv").style.marginBottom = "100px";
}
function changePadding() {
  document.getElementById("myDiv2").style.paddingBottom = "100px";
}

自分で試してみてください

文法

paddingBottom 属性を返す：

object.style.paddingBottom

paddingBottom 属性を設定する：

object.style.paddingBottom = "%|length|initial|inherit"

属性値

値 説明
% 親要素の幅のパーセントで下内余白を定義します。
length 長さ単位で下内余白を定義します。
initial この属性をデフォルト値に設定します。参照してください initial。
inherit この属性を親要素から継承します。参照してください inherit。

技術的詳細

デフォルト値： 0
返り値： 文字列、要素の下内余白を示します。
CSS バージョン： CSS1

ブラウザのサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート