Style margin 属性

定義と用法

margin 属性は要素の外側マージンを設定または返します。

この属性は1から4つの値を取ることができます：

  • 1つの値、例えば：div {margin: 50px} - すべての4つの外側マージンは50px
  • 2つの値、例えば：div {margin: 50px 10px} - 上下外側マージンは50px、左右外側マージンは10px
  • 3つの値、例えば：div {margin: 50px 10px 20px} - 上外側マージンは50px、左右外側マージンは10px、下外側マージンは20px
  • 4つの値、例えば：div {margin: 50px 10px 20px 30px} - 上外側マージンは 50px、右外側マージンは 10px、下外側マージンは 20px、左外側マージンは 30px}

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

も参照してください：

CSS 教程：CSS 外側マージン

CSS リファレンスマニュアル：margin 属性

例

例 1

<div>要素のすべての4つの外側マージンを設定します：

document.getElementById("myDiv").style.margin = "50px 10px 20px 30px";

自分で試してみる

例 2

<div>要素のすべての4つの外側マージンを"25px"に変更します：

document.getElementById("myDiv").style.margin = "25px";

自分で試してみる

例 3

<div>要素の外側マージンを返します：

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

自分で試してみる

例 4

margin 属性と padding 属性の違い：

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

自分で試してみる

構文

margin 属性を返す：

object.style.margin

margin 属性を設定する：

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

属性値

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

技術的詳細

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

ブラウザのサポート

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