無料ホームページ作成!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)
  • padding-top:10px;(上10px)
  • padding-right:10px;(右10px)
  • padding-bottom:10px;(下10px)
  • padding-left:10px;(左10px)

などと様々な使い方があります。
覚えるとホームページを綺麗にできますので必ず覚えましょう。

padding属性の使い方

CSSソース

セレクタ{
	padding:10px;
}
 
結果

padding10pxで宣言。

padding変更してません。

padding属性で宣言できる値

概要
単位付き表示 pt,px,mm,cm,in,pc,em,ex、等の単位を付けて指定できる
auto 自動で設定する

値の使用例

padding要素の値は基本は数値で書きます。

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

CSS・スタイルシート

基本

文字

余白

背景

ボックス

配置

リスト

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