So-net無料ブログ作成
ブログトップ ブログ全体 ヘッダー サイドバー 記事本文 フッター リファレンス Gazon Weblog

【ボックス】margin [リファレンス]

説 明

ボックス要素とその内側にあるボックス要素の間隔を設定します。

使い方

▼ 一括設定
margin: 上下左右;
margin: 上下 左右;
margin: 左右 ;
margin: ;

▼ 個別指定
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;

:マージン(間隔)


解 説

:数値+単位
数値+単位 で指定します。単位は主に「px」を用います。
「上下左右」は上、右、下、左側のマージン(間隔)を一括指定します。
「上下」は上、下を、「左右」は左、右のマージンを一括指定します。
「上」「右」「下」「左」は、個々にマージンを指定します。

次のキーワードが設定可能です。
初期値は「0」です。

0(初期値)、数値+単位

  0・・・間隔はゼロです。
  数値+単位・・・数値を設定します。マイナスも可能。単位は主に「px」を指定します。

尚、数値(サイズ)で指定する方法以外にパーセント(%)指定やauto(ブラウザ自動設定)指定がありますが、ここでは説明しません。

ソースコード:上下左右=10px
aaa1 {
margin:10px;
}

表示例:上下左右=10px
ボックス


ソースコード:上下=10px 左右=50px
aaa2 {
margin:10px 50px;
}

表示例:上下=10px 左右=50px
ボックス


ソースコード:上=10px 右=30px 下=60px 左=100px
aaa3 {
margin:10px 30px 60px 100px;
}

ソースコード:上=10px 右=30px 下=60px 左=100px
aaa4 {
margin-top:10px;
margin-right:30px;
margin-bottom:60px;
margin-left:100px;
}

表示例:上=10px 右=30px 下=60px 左=100px
ボックス


ソースコード:上=ー10px
aaa5 {
margin-top:-10px;
}

表示例:上=ー10px(上に10pxはみ出します)
ボックス

以上。


nice!(0)  コメント(0) 
共通テーマ:ペット

nice! 0

コメント 0

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

×

この広告は1年以上新しい記事の更新がないブログに表示されております。