Home
/
マージンの指定
/ 上下左右のマージンをまとめて指定 :
margin
上下左右のマージンをまとめて指定 :
margin
::: 書 式 :::
margin
: 上側のマージン 右側のマージン 下側のマージン 左側のマージン
::: プロパティ値 :::
マージンには、下記の値を指定します。
単位付きの数値 => 「
単位について
」を参照
%
auto
::: 解 説 :::
「
margin
」プロパティで、上下左右のマージンを一度に設定できます。
この場合、それぞれの値を半角スペースで区切ります。
また、指定した値の個数により、下記のようにマージンが設定されます。
・値が1つの場合: ①上下左右のマージン
・値が2つの場合: ①上下のマージン ②左右のマージン
・値が3つの場合: ①上側マージン ②左右のマージン ③下側マージン
・値が4つの場合: ①上側マージン ②右側マージン ③下側マージン ④左側マージン
::: 対応ブラウザ :::
IE
Firefox
Opera
Chrome
Safari
8
7
6
5.5
5
3.5
3
2
1.5
1
10
9
8
7
6
2
1
4
3
2
1
○
○
○
△
△
○
○
○
○
○
○
○
○
○
○
○
○
○
○
○
○
[ 対応状況 : ○=対応、△=一部対応、×=未対応 ]
::: サンプル :::
[ サンプル画面
]
スタイルシート(CSS) = 上下左右のマージンをまとめて指定 =
スタイルシート(CSS) = 上下左右のマージンをまとめて指定 =
「margin: 0px」を指定
「margin: 0px 20%」を指定
「margin: 10px 30px 10px 30px」を指定
</body> </html>
関連項目
CSSの基本
CSS機能別プロパティ一覧
CSSインデックス
マージンの指定
margin
margin-top
margin-bottom
margin-left
margin-right
Copyright (C) 2009 Html-Labs All Rights Reserved.
この場合、それぞれの値を半角スペースで区切ります。
また、指定した値の個数により、下記のようにマージンが設定されます。
・値が1つの場合: ①上下左右のマージン
・値が2つの場合: ①上下のマージン ②左右のマージン
・値が3つの場合: ①上側マージン ②左右のマージン ③下側マージン
・値が4つの場合: ①上側マージン ②右側マージン ③下側マージン ④左側マージン