中身の余白 padding|CSS辞典|HTMLタグ・CSS

HomeCSS辞典中身の余白 padding
サイト内検索

中身の余白 padding

中身の余白 (詳細情報)
字体 padding:★;  余白をまとめて指定。
padding-top:★;  上だけの余白を指定。
padding-left:★;  左だけの余白を指定。
padding-right:★;  右だけの余白を指定。
padding-bottom:★;  下だけの余白を指定。
指定 ★の部分に下記の「 」内 の効果を指定していきます。
  • 数字」 ボックス内の余白量を指定することができます。
     (単位の種類: % px pt mm cm in pc em ex )
padding だけで指定すると、上下左右の余白をまとめて指定することができます。
  • 4つ指定すると上、右、下、左と指定することができます。
    例: padding: 5px 10px 4px 8px;
  • 3つ指定すると上、左右、下と3パターン指定することができます。
    例: padding: 10px 20px 5px;
  • 2つ指定すると上下、左右と2パターン指定することができます。
    例: padding: 10px 20px;
  • 1つ指定すると上下左右と全部同じ指定をすることができます。
    例: padding: 15px;
効果 ボックスの中身の余白の量を指定することができます。
注意 paddingwidth(横幅指定)height(縦幅指定) を一緒に指定すると、
ブラウザによって幅の取り方がおかしくなります。
例1 <div style="background-color: #faa; padding: 30px;">ホームページの素材屋です</div>
結果
ホームページの素材屋です
例2 <div style="background-color: #afa; padding-left: 40px;">ホームページの素材屋です</div>
結果
ホームページの素材屋です
例3 <div style="background-color: #aaf; padding: 10px 50px 22px 80px;">ホームページの素材屋です</div>
結果
ホームページの素材屋です


練習用書き込みフォーム(サンプル表示)


素材の森 素材NAVI 素材R 素材・壁紙 イラスト素材 素材・作成 素材ランキング 無料素材リンク 素材ファン
無料HP素材、ホームページテンプレート、HTMLタグ・CSS、質問・用語の検索 サイト内検索
素材ランキング 素材NAVI 素材の森 素材サーチ フリー素材 素材・画像 素材・壁紙 素材R Webランキング