無料ホームページ作成！ＣＳＳ・スタイルシート
内側との余白

無料ホームページ作成！CSS・例
内側との余白

結果には分かりやすくするために枠線を引いています。

padding属性

padding属性の指定

• padding:10px;(上下左右10px)
• padding:10px 20px;(上下10px、左右20px)
• padding:10px 20px 30px;(上10px、左右20px、下30px)
• padding:10px 20px 30px 40px;(上10px、右20px、下30px、左40px)

CSS・スタイルシートソース

padding:10px;
padding:10px 20px;
padding:10px 20px 30px;
padding:10px 20px 30px 40px;
 

結果

padding-・・・属性の指定

CSS・スタイルシートソース

padding-top:10px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px;
 

結果

autoで指定

autoを使用する際は、widthやheightで範囲を指定してください。親ボックスにpaddingを指定し、子ボックスの範囲も関係してきます。
この結果の場合、横の幅を100pxにしていますのであまりの余白を自動で指定してくれます。

CSS・スタイルシートソース

padding:auto;
width:100px;
 

結果