パディング ボックスの内側の余白
paddingプロパティ
パディング指定なし 読みにくいですね。。
(padding 1) 上下左右４方向に padding:20px; テキストが一行に収まらない場合は指定した右余白を残して折り返します。
(padding 2) 上下：10px； 左右：120px; 負の値は指定できません。
(padding 3) 上： 30px； 左右： 60px； 下： 10px； padding はボックスの４辺とその内側の内容（テキストや画像）との余白です。
(padding 4) 上：10px； 右：30px； 下：40px； 左：110px；
(padding 5) padding： ８%； パーセントの場合、包含ブロックの横幅(ここでは500px)を基準に算出。上下左右４方向で 40pxになります。
padding:15px 30px; width:160px;
background-color:#48d1cc;背景色の部分がパディングの
領域になります。
ロリポップ！のドメインは選べる全８５種類！！
☆さくらのレンタルサーバ ビジネスプロ☆
マージン
|
サンプルソース
<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">(パディング１) 上下左右にpadding:20px;</p>
<p id="pDing2">(パディング２) 上下:10px; 左右:120px;</p>
<p id="pDing3">(パディング３) 上:30px; 左右:60px; 下:10px;</p>
<p id="pDing4">(パディング４) 上:10px; 右:30px; 下:40px; 左:110px;</p>
<p id="pDing5">(パディング５) 上下左右にpadding:8%；</p>
<p id="IpDing">
<img src="koaras.jpg" border="0" width="160" height="120" alt="">
</p>
</div>
</body>
</html>padding プロパティ
ボックスの４辺とその内側の内容（テキストや画像）との余白の値を一括して指定します。
- 数値＋"px"や"em"等の単位。
- 親要素の幅に対しての割合は%値で。 ※上記サンプル、 (padding 5)
- 値が１つ
padding: 10px;(上下左右) のパディング - 値が２つ
padding: 10px 20px;(上下) (左右) のパディング - 値が３つ
padding: 10px 50px 20px;(上) (左右) (下) のパディング - 値が４つ
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プロパティにはマイナスの値を使用することはできません。
ロリポップ！のドメインは選べる全８５種類！！
☆さくらのレンタルサーバ ビジネスプロ☆
CSS positionプロパティ
回り込み、floatプロパティ/ 回り込み解除、clearプロパティ
visibilityプロパティ 領域の表示、非表示
display プロパティ
