|
トップページ > スタイルシートリファレンス > padding
★スタイルシートリファレンス
|
padding･････パディングに関する指定をまとめて行う
      
  
   
  
paddingプロパティは、上下左右のパディングをまとめて指定する際に使用します。 上下左右を異なるパディング幅にしたい場合には、スペースで区切って複数の値を指定します。
パディングはマージンとセットで覚えるのが良いと思います。 マージン10px
パディング10px
マージン10px、パディング10px
マージンは領域間のスペース、パディングは領域内のスペースです。 尚、パディングには負の値を指定することはできません。 ■使用例スタイルシート部分は外部ファイル（sample.css）に記述。p.sample1 {background-color: #f8dce0; padding: 10px;}p.sample2 {background-color: #f8dce0; margin: 30px; padding: 10px;} p.sample3 {background-color: #f8dce0; padding: 10px 20px;} p.sample4 {background-color: #f8dce0; padding: 10px 20px 30px;} p.sample5 {background-color: #f8dce0; padding: 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"> このサンプルでは上下左右にまとめて30pxのマージンと、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のパディングを指定しています。パディングには負の値を指定することはできません。 このサンプルでは上下左右にまとめて30pxのマージンと、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･････････････････右パディングを指定する |
トップページ > スタイルシートリファレンス > padding
|
©2010 HTMQ