CSS padding-block-end 属性

定義と使用方法

の padding-block-end は、要素の境界から内容のブロック方向の終わりまでのスペースを指します。

CSS padding-block と padding-inline 属性はCSS属性 padding-top、padding-bottom、padding-left と padding-right 非常に似ていますが、 padding-block と padding-inline 属性はブロック方向と行内方向に依存しています。

注意：関連するCSS属性 writing-mode ブロック方向を定義しています。これはブロックの始まりと終わりの位置に影響を与え、 padding-block 属性の結果。英語ページでは、ブロック方向は下に向かっており、行内方向は左から右に向かっています。

例

例1

ブロック方向の終了部にインセットを設定します：

p {
  padding-block-end: 35px;
}

自分で試してみてください

例2

<div>要素の writing-mode 属性値がvertical-rlに設定されている場合、ブロック方向は右から左に向かいます。結果として、要素の終了位置は下部から左側に移動します：

div {
  writing-mode: vertical-rl;
  padding-block-end: 50px;
}

自分で試してみてください

CSS文法

padding-block-end: auto|value|initial|inherit;

属性値

値 説明
auto デフォルト。要素のデフォルトのpadding-block-endの値。
length

px、pt、cmなどの単位でpadding-block-endを指定します。負値は許可されません。

参照してください：CSS 単位。
% padding-block-endは、親要素の行内方向のサイズのパーセントで指定されます。
initial この属性をデフォルト値に設定します。参照してください initial。
inherit 親要素からこの属性を継承します。参照してください inherit。

技術的詳細

デフォルト値： auto
継承性： いいえ
アニメーション制作： サポートしています。参照してください：アニメーション関連属性。
バージョン： CSS3
JavaScript文法： object.style.paddingBlockEnd="100px"

ブラウザのサポート

テーブルの数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。

クローム エッジ ファイアフォックス サファリ オペラ
87.0 87.0 41.0 12.1 73.0

相关页面

参考：CSS padding-block 属性

参考：CSS padding-block-start 属性

参考：CSS padding-inline 属性

参考：CSS padding-bottom 属性

参考：CSS padding-left 属性

参考：CSS padding-right 属性

参考：CSS padding-top 属性

参考：CSS writing-mode 属性