Style marginBottom 属性

定義と使用方法

marginBottom 属性を設定または返して、要素の下外側マージンを取得します。

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

参照してください：

CSS 説明書：CSS 外縁

CSS 参考マニュアル：margin-bottom 属性

HTML DOM 参考マニュアル：margin 属性

インスタンス

例 1

<div> 元素の下外側マージンを設定する：

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

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

例 2

<div> 元素の下外側マージンを「normal」に戻す：

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

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

例 3

以下は <div> 元素の下外側マージンです：

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

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

例 4

marginBottom と paddingBottom の違い：

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

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

文法

marginBottom 属性を返す：

object.style.marginBottom

marginBottom 属性を設定する：

object.style.marginBottom = "%|length|auto|initial|inherit"

属性値

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

技術的詳細

デフォルト値： 0
返り値： 文字列、要素の下外側マージンを表します。
CSS バージョン： CSS1

ブラウザのサポート

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