CSSのpaddingの確認
Posted at 2010-3-9 2:08 Categorized as HTML&CSS
サイトを作るときに、多用するもののうちの1つがpaddingです。
動きを確認しておきます。
<p style="background-color:green; width: 40px;">テスト</p>
テスト
<p style="padding:20px;background-color:green; width: 40px;">テスト</p>
テスト
上がpaddingなしで、下がpadding:20pxありです。
paddingは外枠と「テスト」文字の間のスペースをあける場合に使う。
(つまり領域が広がります)
赤い線のところがpaddingの20pxです。
padding:20pxでは上下左右を意味します。
他にも
padding:20px 30px と2つ指定したときは「上下」「左右」
padding:20px 30px 40px と3つ指定したときは「上」「左右」「下」
padding:20px 30px 40px 50px と4つ指定した場合は「上」「右」「下」「左」
を表します。
僕はほとんど1つか4つしか使いません。4つの時の覚え方は時計12時から時計回りって覚えています。
あと
padding-top:20px
padding-right:20px
padding-bottom:20px
padding-left:20px
のように単独でも指定できます。
