前ページのwidth、heightコンテンツ部のように、領域にぎっしり文字を入れると窮屈な感じがします。
一般的には周りに余白を付けてゆったり表示します。
paddingで余白を付ける
見比べるために前ページの余白のない表示と余白を付けた表示を並べてみます。
竹取物語は、平安初期に著されたとされる、仮名による日本最古の物語。作者及び成立年は未詳。竹取の翁によって竹の中から見つけられた「かぐや姫」が、貴公子たちの求婚を次々と退け、帝の招聘も拒絶し、最後は月に帰ってしまう話。
竹取物語は、平安初期に著されたとされる、仮名による日本最古の物語。作者及び成立年は未詳。竹取の翁によって竹の中から見つけられた「かぐや姫」が、貴公子たちの求婚を次々と退け、帝の招聘も拒絶し、最後は月に帰ってしまう話。
下のコンテンツは上のコンテンツに、上、右、下、左、共に20pxの余白を付けました。
ここで注目しておくことは、余白を付けただけで余白部分にもbackgroundが適用される、ということです。
これは大事なことなので覚えておきましょう。
余白を付けたソースと前ページのソースを比べて見てください。
余白を付けたhtmlソース
スタイルソースで余白を付けるので、htmlソースは同じです。
htmlソース
<!--====参考====-->
<body>
<div id="container">
<div class="sample_1">
<p>竹取物語は、平安初期に著されたとされる、仮名による日本最古の物語。作者及び成立年は未詳。竹取の翁によって竹の中から見つけられた「かぐや姫」が、貴公子たちの求婚を次々と退け、帝の招聘も拒絶し、最後は月に帰ってしまう話。</p>
</div>
</div><!--container-->
</body>
余白を付けたスタイルソース
cssソース
/*====参考====*/
.sample_1 {
width: 50%;
background: #fecfd8;
text-align: left;
padding: 20px; /*この1行を追加しました。*/
margin: 0 auto;
}
paddingの書き方
paddingの書き方には必要によっていろいろな指定の仕方があります。
指定の仕方によって適用が違ってきます。
padding: 20px;のように値が1個のとき
上、右、下、左の余白が20px
padding: 20px 40px;のように値が2個のとき
上、下の余白が20px、右、左の余白が40px
padding: 20px 40px 30px;のように値が3個のとき
上の余白が20px、右、左の余白が40px、下の余白が30px
padding: 20px 40px 30px 50px;のように値が4個のとき
上の余白が20px、右の余白が40px、下の余白が30px、左の余白が50px
その他に
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
のように別々に指定することもできます。