Style marginBottom 属性

定義と使用方法

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

margin 属性 と padding 属性 すべての要素の周りにスペースを挿入します。しかし、違いは、margin が境界線の周りにスペースを挿入し、padding が要素の境界線内にスペースを挿入することです。

参照してください：

CSS チュートリアル：CSS Margin

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

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support