|
トップページ > スタイルシートリファレンス > margin
★スタイルシートリファレンス
|
margin･････マージンに関する指定をまとめて行う
      
  
   
  
marginプロパティは、上下左右のマージンをまとめて指定する際に使用します。 上下左右を異なるマージン幅にしたい場合には、スペースで区切って複数の値を指定します。
マージンはパディングとセットで覚えるのが良いと思います。 マージン10px
パディング10px
マージン10px、パディング10px
マージンは領域間のスペース、パディングは領域内のスペースです。 尚、マージンには負の値を指定することもできます。 マージンに負の値を指定することで、複数の領域を重ねて表示させることが可能ですが、重なり順や重ね位置がブラウザによって異なるため、注意が必要です。 ■使用例スタイルシート部分は外部ファイル（sample.css）に記述。p.sample1 {background-color: #f8dce0; margin: 10px;}p.sample2 {background-color: #f8dce0; margin: 10px; padding: 10px;} p.sample3 {background-color: #f8dce0; margin: 10px 20px;} p.sample4 {background-color: #f8dce0; margin: 10px 20px 30px;} p.sample5 {background-color: #f8dce0; margin: 10px 20px 30px 40px;} HTMLソース<html><head> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <p class="sample1">マージン10px</p> <p class="sample2">マージン10px、パディング10px</p> <p class="sample3">上下10px、左右20px</p> <p class="sample4">上10px、左右20px、下30px</p> <p class="sample5">上10px、右20px、下30px、左40px</p> </body> </html> ↓↓↓ ブラウザ上の表示マージン10px マージン10px、パディング10px 上下10px、左右20px 上10px、左右20px、下30px 上10px、右20px、下30px、左40px ■関連項目margin･･･････････････････････マージンに関する指定をまとめて行う
margin-top･･･････････････････上マージンを指定する margin-bottom･･･････････････下マージンを指定する margin-left･･･････････････････左マージンを指定する margin-right･･････････････････右マージンを指定する padding･･････････････････････パディングに関する指定をまとめて行う padding-top･･････････････････上パディングを指定する padding-bottom･･････････････下パディングを指定する padding-left･･････････････････左パディングを指定する padding-right･････････････････右パディングを指定する |
トップページ > スタイルシートリファレンス > margin
|
©2010 HTMQ