KAWANO's PukiWiki Plus! - Lecture/JouhouC2010/7th/margin の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• Lecture/JouhouC2010/7th/margin へ行く。

TITLE:マージンの設定
*マージンの設定 [#n64ee486]

マージン（ボックスの周りの空白）の大きさを設定するには、
''margin-???''プロパティを設定します。

#pre(novervatim){{
COLOR(red):margin-top: COLOR(blue):上のマージン
COLOR(red):margin-bottom: COLOR(blue):下のマージン
COLOR(red):margin-left: COLOR(blue):左のマージン
COLOR(red):margin-right: COLOR(blue):右のマージン
COLOR(red):margin: COLOR(blue):上下左右のマージン
}}

#ref(Lecture/JouhouC2007/6th/box/css01.png,nolink,ボックスの構造)

マージンの大きさは、次の設定ができます。
-%: ボックスの横幅に対する割合
-単位つき数値: 10px、1.5emなど
-auto: 状況に応じて自動調整

marginプロパティを使えば、
上下左右のマージンを一度に指定できます。
その場合は、値を半角スペースで区切ります。
値の個数によって、次のようにマージンが設定されます。
-値が1つ: 「上下左右」を指定
-値が2つ: 1つ目の値は「上下」、2つ目の値は「左右」
-値が3つ: 1つ目の値は「上」、2つ目の値は「左右」、3つ目は「下」
-値が4つ: 1つ目の値は「上」、2つ目の値は「右」、3つ目は「下」、4つ目は「左」


#pre(novervatim){{
body{
  COLOR(red):margin: COLOR(blue):0;
}
h2{
  COLOR(red):margin-top: COLOR(blue):10px;
  COLOR(red):margin-left: COLOR(blue):20px;
}
h3{
  COLOR(red):margin: COLOR(blue):10%;
}
}}


&br;
&navi2(Lecture/JouhouC2010/7th,next);進んでください。
----
#navi2(Lecture/JouhouC2010/7th,prev,toc,next)