最新のWeb開発のチュートリアル
 

Style margin Property

<スタイルオブジェクト

例

4つのすべての余白を設定<div>要素を：

document.getElementById("myDiv").style.margin = "50px 10px 20px 30px";
»それを自分で試してみてください

定義と使用法

マージンプロパティセットまたは要素のマージンを返します。

このプロパティは、1から4つの値をとることができます。

  • 一つの値、のように：DIV {マージン：は50px} - すべての4つのマージンは50pxであろう
  • 二つの値は、のように：DIV {マージン：10pxのは50px} - 上下の余白がは50pxになり、左右の余白が10pxのであろう
  • DIV {マージン：は50px 10pxの20ピクセル}のような3つの値 - トップマージンはは50pxになり、左と右のマージンが10pxのになり、下マージンは20ピクセルであろう
  • DIV：のような四つの値、{マージン：は50px 10pxの20ピクセル30px} - トップマージンは50pxになり、右マージンが10pxのになり、ボトムマージンは20ピクセルになり、左マージンがされる30px

マージンプロパティと要素の周りのパディングプロパティの挿入スペースの両方。 しかし、その差は詰め物が要素の境界内のスペースを挿入しながら、マージンが、境界線の周りにスペースを挿入することです。

ブラウザのサポート

Internet ExplorerFirefoxOperaGoogle ChromeSafari

マージンプロパティは、すべての主要なブラウザでサポートされています。

構文

マージンプロパティを返します：

object .style.margin

マージンプロパティを設定します。

object .style.margin=" プロパティ値
値 説明
% 親要素の幅の％で余白を定義します
length 長さの単位で余白を定義します
auto ブラウザは、マージンを設定する(all four margins will be equal)
initial このプロパティがデフォルト値に設定します。 最初の記事を読みます
inherit その親要素からこのプロパティを継承します。 継承についての記事を読みます

技術的な詳細

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

その他の例

例

4つのすべての余白の変更<div>の要素を"25px" ：

document.getElementById("myDiv").style.margin = "25px";
»それを自分で試してみてください

例

余白戻る<div>要素を：

alert(document.getElementById("myDiv").style.margin);
»それを自分で試してみてください

例

マージンプロパティやパディングプロパティの違い：

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

function changePadding() {
    document.getElementById("myDiv2").style.padding = "100px";
}
»それを自分で試してみてください

関連ページ

CSSチュートリアル： CSSのマージン

CSSリファレンス： margin property

<スタイルオブジェクト