概要へ移動

このページでは、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 ;を複数回書いているので、保守性が悪いことに注意。

CSS : 例
.top {
padding: 10px ;
padding-top: 40px ;
}
.right {
padding: 10px ;
padding-right: 40px ;
}
.bottom {
padding: 10px ;
padding-bottom: 40px ;
}
.left {
padding: 10px ;
padding-left: 40px ;
}
HTML : 適用するHTML
<div class="top"> top </div>
<div class="right"> right </div>
<div class="bottom"> bottom </div>
<div class="left"> left </div>
実行結果
top
right
bottom
left

Emmet

記述Visual Studio Code
ptpadding-top: ;
prpadding-right: ;
pbpadding-bottom: ;
plpadding-left: ;
pt5padding-top: 5px;
pr5padding-right: 5px;
pb5padding-bottom: 5px;
pl5padding-left: 5px;