内側の余白を指定する
上部
スタイルシートを使ってボックスの内側の余白を指定する方法について説明していくよ。
内側の余白というのは、枠線からタグの内容までの余白のことだよ。
内側の余白を指定するには「padding」を使うんだよ。
内側の余白を指定する
上部
例えば、「見出し２」の、内側に10pxの余白を指定したい場合、スタイルシートに次のように書こう。
h2{padding:10px;}
学
なるほどー。
上部
この書き方だと上下左右同じように10pxの余白が設定されるんだけど、上下左右それぞれ余白の値を設定することも出来るんだよ。
例えば、上を5px、下を10px、右を15px、左を20pxにしたい場合は、スタイルシートに次のように書こう。
h2{padding:5px 10px 15px 20px;}
学
なるほどー。別々の値を指定する事も出来るんですね。
では、早速僕の自己紹介の「見出し２」と「見出し３」の内側に余白をつけてみますよ。
h1{
text-align:center;
font-size:20px;
color:#0000ff;
}
h2{
font-size:15px;
color:#3366ff;
background-color:#FFFF99;
border:1px solid #FF9900;
padding:0.3em;
}
h3{
font-size:13px;
background-color:#CCFFFF;
padding:0.2em;
}
p{
font-size:12px;
line-height:1.5em;
}
ul{font-size:12px;}
table{font-size:12px;}
学
「見出し２」と「見出し３」の内側に余白をつけてみました。
学の自己紹介を新しいウィンドウで開く
さっきまでは窮屈な感じでしたが、見栄えがよくなりました。
