マンガでわかるホームページ作成

CSS paddingやmarginを1行で指定するときの順番

CSSで余白の調整の際に必ず使うpaddingやmarginは上下左右それぞれ指定できます。
その順番について説明します。

結論

上右下左(↑→↓←)
時計回りの0時、3時、6時、9時と覚えましょう。

以下が例です。
わかりやすいように大げさに指定しています。

オレンジ:padding
黒:border
水色:margin

上:1px
右:10px
下:50px
左:100px

テキスト

html

<div class="wrap">
<div class="junban">テキスト</div>
</div>

CSS

.wrap{
display:inline-block;
border:1px solid #f2f2f2;
background:#d4e4ff;
}
.junban{
display:inline-block;
margin:1px 10px 50px 100px;
padding:1px 10px 50px 100px;
border:1px solid;
border-width:1px 10px 50px 100px;
background:#ffd191;
}

全部同じとき

padding:10px = padding:10px 10px 10px 10px

上下と左右それぞれ同じとき

 padding:10px 20px = padding:10px 20px 10px 20px
=padding:上下 左右

上と下が違い左右は同じとき

 padding:10px 20px 30px = padding:10px 20px 30px 20px
=padding:上 左右 下

まとめ

marginもpaddingもborderも上右下左の順で1行で指定できます。時計回りと覚えましょう。

以上、CSS paddingやmarginを1行で指定するときの順番についてでした。

関連記事