Style marginTop属性

定義と使用方法

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

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

参照：

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

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

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

インスタンス

例1

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

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

自分で試してみる

例2

<div>要素の上外側マージンを"normal"に戻す：

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

自分で試してみる

例3

返り値：<div>要素の上外側マージン：

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

自分で試してみる

例4

marginTopとpaddingTopの違い：

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

自分で試してみる

文法

marginTop属性を返す：

object.style.marginTop

marginTop属性を設定する：

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

属性値

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

技術的詳細

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

ブラウザサポート

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