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

無料ホームページ作成!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: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;
 
結果
padding-top:10px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px;

autoで指定

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

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

padding:auto;
width:100px;
 
結果
padding:auto;

無料ホームページ作成!メニュー

CSS・スタイルシート・例

文字

余白

背景

ボックス

配置

リスト

リンクについてお問い合わせ
無料ホームページ作成!HTML&CSS