padding-block、padding-inlineの評価
頻出度
(1.0)
重要度
(1.0)
総合評価
(1.0)
目次
1.padding-block、padding-inlineとは?
padding-blockプロパティはpadding-block-start、padding-block-endプロパティを、padding-inlineプロパティはpadding-inline-start、padding-inline-endプロパティをまとめて指定できます。
値の指定方法は以下の通りです。
{ padding-block: 値; }
{ padding-inline: 値; }
値の指定方法
個別指定の各プロパティと同じです。
値が2つ指定された場合、順に始端辺、終端辺の幅となります。
値が1つ指定された場合、始端辺、終端辺の両方に値が適用されます。
2.padding-block、padding-inlineの使い方
それではpadding-block、padding-inlineの使い方をみていきましょう。
.box {
background-color: red;
width: 200px;
height: 200px;
}
.text {
writing-mode: vertical-rl;
padding-block: 20px 40px;
background-color: blue;
}
他にも値を設定できるのでいろいろと試してみることをお勧めします!