Style marginLeft 属性

定義と使用方法

marginLeft 属性を設定または返して、要素の左外縁マージンを設定します。

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

参照：

CSSチュートリアル：CSS 外縁

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

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

例1

div要素の左外縁マージンを設定します：

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

実際に試してみる

例2

div要素の左外縁マージンを"normal"に戻します：

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

実際に試してみる

例3

div要素の左外縁マージンを返します：

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

実際に試してみる

例4

marginLeftとpaddingLeftの違い：

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

実際に試してみる

構文

marginLeft属性の返り値：

object.style.marginLeft

marginLeft属性の設定：

object.style.marginLeft = "%|length|auto|inherit"

属性値

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

技術的詳細

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

ブラウザサポート

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