padding-top、 padding-right、 padding-bottom、 padding-left - CSSプロパティ - Web開発

このページでは、paddingプロパティの知識を前提として、下表のCSSプロパティの解説をする。

CSSプロパティ	対象
`padding-top`	上辺の内側の余白
`padding-right`	右辺の内側の余白
`padding-bottom`	下辺の内側の余白
`padding-left`	左辺の内側の余白

例

top

right

bottom

left

なお、見た目のため、このページの実行結果には「下のCSSコードも」適用している。

CSS : デフォルトCSS


div {
    border:             8px solid seagreen; /*  境界線  */
    margin:             8px;                /*  外側の余白  */
    display:            inline-block;       /*  横並び  */
    vertical-align:     top;                /*  上揃え  */
}

概要

特定の辺（上下左右）のパディングを指定したい場合に使う。

基本的にpaddingプロパティで指定した基本のパディングの一部を変更するために使う。

例。

CSS : 例


.base   {    padding:    10px ;     }

.top    {    padding-top:    40px ; }
.right  {    padding-right:  40px ; }
.bottom {    padding-bottom: 40px ; }
.left   {    padding-left:   40px ; }

HTML : 適用するHTML


<div class="base"> base </div>

<div class="base top"> base <br> top </div>

<div class="base right"> base <br> right </div>

<div class="base bottom"> base <br> bottom </div>

<div class="base left"> base <br> left </div>

実行結果

base

base
top

base
right

base
bottom

base
left

クラスにpaddingプロパティの設定を組み込んだ例。結果は同じだが、padding: 10px ;を複数回書いているので、保守性が悪いことに注意。