コーディングをしていると必ず使用するpaddingプロパティですが、これは要素の内側の余白(要素の内容と枠線の間の余白)を指定するプロパティです。上下左右の余白をショートハンドで指定したり、個別の方向の余白を指定する事ができますが、場合によってコードが複雑になったり可視性が悪くなる事があります
今回は、より効率的に直感的にも要素の内側の余白を指定出来るpadding-inline・padding-blockプロパティについて詳しく解説していきます。
margin-inlineプロパティについてはmargin-inline: auto;が意外と便利！ブロック要素の左右中央揃えに使えるプロパティ【CSS】をご覧ください。
paddingプロパティについて
まずは、従来のpaddingプロパティについてです。
このプロパティは要素の内側の余白(要素の内容と枠線の間の余白)を指定出来るプロパティです。ショートハンドで上下左右の余白を一括で指定したり、個別に指定する事も可能です。
paddingプロパティの記述は以下のようになります。
.box {
/* 値1つ：上下左右に同じ値を指定 */
padding: 20px;
/* 値2つ：上下・左右でそれぞれの値を指定 */
padding: 20px 30px;
/* 値3つ：上・左右・下にそれぞれの値を指定 */
padding: 20px 30px 25px;
/* 値4つ：上・右・下・左にそれぞれの値を指定 */
padding: 20px 30px 20px 30px;
/* 個別方向の指定 */
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
}上記のように、ショートハンドでは値の数によってそれぞれの方向への指定をする事ができ、個別方向への指定も可能です。普段使用している記述方法だと思いますが、記述が長くなってしまったり、慣れないと見た目でどの方向への余白指定かが分かり難くなってしまいます。
padding-inline・padding-blockプロパティについて
これまでのpaddingプロパティの煩雑さを解消できるのがpadding-inline・padding-blockプロパティとなります。
これらはそれぞれインライン方向とブロック方向の余白を指定する事ができます。
インライン方向とブロック方向
インライン方向はテキストの流れと同じ方向、ブロック方向はテキストの流れに対する垂直方向となります。
- インライン方向
テキストが横書きの場合は水平方向(左右)、縦書きの場合は垂直方向(上下) - ブロック方向
テキストが横書きの場合は垂直方向(上下)、縦書きの場合は水平方向(左右)
padding-inlineプロパティ
padding-inlineプロパティはインライン方向の余白を指定する事が出来るプロパティで、以下のプロパティのショートハンドとなります。
- padding-inline-start
- padding-inline-end
padding-inline-startプロパティはインライン方向の始めの余白、padding-inline-endプロパティはインライン方向の終わりの余白となります。(テキストが横書きの場合：padding-inline-startは左、padding-inline-endは右)
テキストが横書きの場合、padding-inlineプロパティで値を1つ指定すると左右の余白、値を2つ指定するとそれぞれ左と右の余白の指定が可能です。
padding-blockプロパティ
padding-blockプロパティはブロック方向の余白を指定する事が出来るプロパティで、以下のプロパティのショートハンドとなります。
- padding-block-start
- padding-block-end
padding-block-startプロパティはブロック方向の始めの余白、padding-block-endプロパティはブロック方向の終わりの余白となります。(テキストが横書きの場合：padding-block-startは上、padding-block-endは下)
テキストが横書きの場合、padding-blockプロパティで値を1つ指定すると上下の余白、値を2つ指定するとそれぞれ上と下の余白の指定が可能です。
それぞれの使用例
padding-inline・padding-blockプロパティは以下のように記述します。
/* テキストが横書きの場合 */
.box {
/* 値1つ：左右の値を指定 */
padding-inline: 20px;
/* 値2つ：それぞれ左・右の値を指定 */
padding-inline: 20px 30px;
/* 値1つ：上下の値を指定 */
padding-block: 20px;
/* 値2つ：それぞれ上・下の値を指定 */
padding-block: 20px 30px;
/* 個別に指定する場合 */
/* 左 */
padding-inline-start: 20px;
/* 右 */
padding-inline-end: 20px;
/* 上 */
padding-block-start: 20px;
/* 下 */
padding-block-end: 20px;
}
このようにそれぞれの方向の余白を指定出来ます。
上下・左右のみの余白の指定でショートハンドでの記述が主な利用になるかと思います。個別にpaddingの指定をするよりも記述が少なくなりますし、余計な打ち消しも発生しませんので煩雑になりません。
また、テキストの表示される方向によって余白の位置が変わりますので、PC時は縦書き・SP時は横書きにする場合にする時にも便利です。
margin-inlineプロパティについてはmargin-inline: auto;が意外と便利！ブロック要素の左右中央揃えに使えるプロパティ【CSS】をご覧ください。
さいごに
いかがでしたでしょうか。
今回は、余白指定を効率的にできるpadding-inline・padding-blockプロパティについて解説しました。
通常のpaddingプロパティと使い分ける事で、効率的に見やすいコードになります。積極的に使用していきたいプロパティですね！
