paddingコンテンツ周りの余白


前ページの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;
のように別々に指定することもできます。

次はborder余白外回りの枠線

  1. width、heightコンテンツ部
  2. paddingコンテンツ周りの余白
  3. border余白外回りの枠線
  4. margin枠線と表示領域の間隔