Top > Lecture > JouhouC2010 > 7th > margin
AND OR

マージンの設定

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

margin-top: 上のマージン
margin-bottom: 下のマージン
margin-left: 左のマージン
margin-right: 右のマージン
margin: 上下左右のマージン
ボックスの構造

マージンの大きさは、次の設定ができます。

  • %: ボックスの横幅に対する割合
  • 単位つき数値: 10px、1.5emなど
  • auto: 状況に応じて自動調整

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

  • 値が1つ: 「上下左右」を指定
  • 値が2つ: 1つ目の値は「上下」、2つ目の値は「左右」
  • 値が3つ: 1つ目の値は「上」、2つ目の値は「左右」、3つ目は「下」
  • 値が4つ: 1つ目の値は「上」、2つ目の値は「右」、3つ目は「下」、4つ目は「左」
body{
  margin: 0;
}
h2{
  margin-top: 10px;
  margin-left: 20px;
}
h3{
  margin: 10%;
}


次へ進んでください。



リロード   差分   ホーム 一覧 検索 最終更新 バックアップ リンク元   ヘルプ   最終更新のRSS
Last-modified: Tue, 11 Mar 2014 20:20:22 JST (3691d)