2011年10月15日

paddingプロパティ ボックスの内側の余白

スポンサード リンク

パディング ボックスの内側の余白
paddingプロパティ

パディング指定なし 読みにくいですね。。

(padding 1) 上下左右4方向に padding:20px; テキストが一行に収まらない場合は指定した右余白を残して折り返します。

(padding 2) 上下:10px; 左右:120px; 負の値は指定できません。

(padding 3) 上: 30px; 左右: 60px; 下: 10px; padding はボックスの4辺とその内側の内容(テキストや画像)との余白です。

(padding 4) 上:10px; 右:30px; 下:40px; 左:110px;

(padding 5) padding: 8%; パーセントの場合、包含ブロックの横幅(ここでは500px)を基準に算出。上下左右4方向で 40pxになります。


padding:15px 30px;  width:160px;
background-color:#48d1cc;


背景色の部分がパディングの
領域になります。

ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ

 マージン
   パディング              ボーダー↑
要素
↓ボーダー        パディング  
マージン

サンプルソース

<html>
 <head>
<title>padding プロパティ</title>
 <style type="text/css">
  <!--
        #oyaDiv{ width: 500px; } /* 包含ブロック */

        #oyaDiv p{ background-color: #ffdab9; }
          
        #pDing1{ padding: 20px; } /* (上下左右)のパディング */
    
        #pDing2{ padding: 10px 120px; }/* (上下)(左右)のパディング */
         
        #pDing3{ padding: 30px 60px 10px; }/* (上)(左右)(下)のパディング */
      
        #pDing4{padding: 10px 30px 40px 110px; }/* (上)(右)(下)(左)のパディング */

        #pDing5{padding: 8%; }/* (上下左右)に%値を設定 */
          
        #oyaDiv #IpDing { /* 画像に パディング */
          padding: 15px 30px; /*(上下)(左右)のパディング */
          width:160px; /* 画像の幅 */
          background-color :#48d1cc; /* 背景色 */
                }
-->
</style>
</head>
<body>
  <div id="oyaDiv">
<p>パディング指定なし</p>
<p id="pDing1">(パディング1) 上下左右にpadding:20px;</p>
<p id="pDing2">(パディング2) 上下:10px; 左右:120px;</p>
<p id="pDing3">(パディング3) 上:30px; 左右:60px; 下:10px;</p> 
<p id="pDing4">(パディング4) 上:10px; 右:30px; 下:40px; 左:110px;</p>
<p id="pDing5">(パディング5) 上下左右にpadding:8%;</p>
<p id="IpDing">
     <img src="koaras.jpg" border="0" width="160" height="120" alt="">
</p>
  </div>
</body>
</html>
padding プロパティ
ボックスの4辺とその内側の内容(テキストや画像)との余白の値を一括して指定します。
  • 数値+"px"や"em"等の単位。
  • 親要素の幅に対しての割合は%値で。 ※上記サンプル、 (padding 5)
複数の値を指定する場合は半角スペースで区切ってを記述します。
  • 値が1つ padding: 10px;   (上下左右) のパディング
  • 値が2つ padding: 10px 20px; (上下) (左右) のパディング
  • 値が3つ padding: 10px 50px 20px;  (上) (左右) (下) のパディング
  • 値が4つ padding: 10px 20px 30px 50px;  (上) (右) (下) (左) のパディング
padding-top,right,bottom,leftプロパティ
上・右・下・左 のパディングを個別に設定
  • padding-top: 10px;     上辺のパディングを設定
  • padding-right: 20px;     右辺のパディングを設定
  • padding-bottom: 30px;   下辺のパディングを設定
  • padding-left: 40px;         左辺のパディングを設定
padding:パーセント値;
パーセント値で指定した場合、パーセント値は包含ブロックの横幅を基準とした割合になります。
padding-top や padding-bottom の場合も、横幅を参照します。
padding; 負の値;
 paddingプロパティにはマイナスの値を使用することはできません。

ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ
CSS positionプロパティ
回り込み、floatプロパティ/ 回り込み解除、clearプロパティ
visibilityプロパティ 領域の表示、非表示
display プロパティ

posted by javaScript at 15:48 | 大阪 ☁ | ボックス | このブログの読者になる | 更新情報をチェックする
×

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