padding-inline-end
は CSS のプロパティで、要素のインライン方向の論理的な末尾側のパディングを定義し、それが要素の書字方向やテキストの方向に応じて物理的なマージンに対応付けられます。これは padding-top
, padding-right
, padding-bottom
, padding-left
の何れかのプロパティに対応し、どれに対応するかは writing-mode
, direction
, text-orientation
で定義された値によって決まります。
関連プロパティとして、要素の他のマージンを定義する padding-block-start
, padding-block-end
, padding-inline-start
があります。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
構文
/* <length> 値 */ padding-inline-end: 10px; /* 絶対的な長さ */ padding-inline-end: 1em; /* テキストの大きさに対する相対値 */ /* パーセント値 */ padding-inline-end: 5%; /* ブロックコンテナーの幅に対する割合のパディング */ /* グローバル値 */ padding-inline-end: inherit; padding-inline-end: initial; padding-inline-end: unset;
初期値 | 0 |
---|---|
適用対象 | すべての要素 |
継承 | なし |
パーセンテージ | logical-width of containing block |
メディア | 視覚 |
計算値 | as length |
アニメーションの種類 | 個別 |
正規順序 | 形式文法で定義される一意のあいまいでない順序 |
値
padding-inline-end
プロパティは padding-left
プロパティと同じ値を取ります。
形式文法
<'padding-left'>
例
HTML
<div> <p class="exampleText">Example text</p> </div>
CSS
div { background-color: yellow; width: 120px; height: 120px; } .exampleText { writing-mode: vertical-lr; padding-inline-end: 20px; background-color: #C8C800; }
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Logical Properties and Values Level 1 padding-inline-end の定義 |
編集者草案 | 初回定義 |
ブラウザーの互換性
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
デスクトップ | モバイル | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
padding-inline-end | Chrome
完全対応
69
| Edge 未対応 なし | Firefox
完全対応
41
| IE 未対応 なし | Opera
完全対応
56
| Safari
完全対応
12.1
| WebView Android
完全対応
69
| Chrome Android
完全対応
69
| Firefox Android
完全対応
41
| Opera Android
完全対応
48
| Safari iOS
完全対応
12.2
| Samsung Internet Android
完全対応
あり
|
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
- ユーザーが明示的にこの機能を有効にしなければなりません。
- ユーザーが明示的にこの機能を有効にしなければなりません。
- 非標準の名前を使用しています。
- 非標準の名前を使用しています。
関連情報
- 対応付け先の物理的なプロパティ:
padding-top
,padding-right
,padding-bottom
,padding-left
writing-mode
,direction
,text-orientation