So-net無料ブログ作成
ブログトップ ブログ全体 ヘッダー サイドバー 記事本文 フッター リファレンス Gazon Weblog

【ボックス】padding [リファレンス]

説 明

テキストとそれを囲むボックスとの間隔(パディング)を設定します。

使い方

▼ 一括設定
padding: 上下左右;
padding: 上下 左右;
padding: 左右 ;
padding: ;

▼ 個別指定
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;

:パディング(間隔)


解 説

:数値+単位
数値+単位 で指定します。単位は主に「px」を用います。
「上下左右」は上、右、下、左側のパディング(間隔)を一括指定します。
「上下」は上、下を、「左右」は左、右のパディングを一括指定します。
「上」「右」「下」「左」は、個々にパディングを指定します。

次のキーワードが設定可能です。
初期値は「0」です。

0(初期値)、数値+単位

  0・・・間隔はゼロです。
  数値+単位・・・数値を設定します。単位は主に「px」を指定します。

尚、数値(サイズ)で指定する方法以外にパーセント(%)指定やauto(ブラウザ自動設定)指定がありますが、ここでは説明しません。

ソースコード:上下左右=10px
aaa1 {
padding:10px;
}

表示例:上下左右=10px
テキスト


ソースコード:上下=10px 左右=50px
aaa2 {
padding:10px 50px;
}

表示例:上下=10px 左右=50px
テキスト


ソースコード:上=10px 右=30px 下=60px 左=100px
aaa3 {
padding:10px 30px 60px 100px;
}

ソースコード:上=10px 右=30px 下=60px 左=100px
aaa4 {
padding-top:10px;
padding-right:30px;
padding-bottom:60px;
padding-left:100px;
}

表示例:上=10px 右=30px 下=60px 左=100px
テキスト

以上。


nice!(1)  コメント(2) 
共通テーマ:ペット

nice! 1

コメント 2

w.ring.link

はじめまして。
こんにちは(´∇`)

CSSとか初心者中の初心者でしたが、
こちらのブログを拝見し、
とてもわかりやすかったです(´∇`)

お陰で自分のイメージに近いブログができました。
ありがとうございました。
by w.ring.link (2015-06-20 12:05) 

かほりん

* w.ring.linkさん *

はじめまして♪(^^)
少しでもお役に立てて光栄です!
「わかりやすかった」と言ってもらえるのが何よりも嬉しいかも〜♪
是非また遊びに来てくださいねっ。
by かほりん (2015-06-21 19:37) 

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

×

この広告は1年以上新しい記事の更新がないブログに表示されております。