CSS padding-inline-end 屬性

定義和用法

元素的 padding-inline-end 是指在行內方向結束處從元素的邊框到內容的空間。

CSS padding-inline 和 padding-block 屬性與 CSS 屬性 padding-top、padding-bottom、padding-left 和 padding-right 非常相似，但 padding-inline 和 padding-block 屬性依賴于行內方向和塊方向。

注意：相關的 CSS 屬性 writing-mode 和 direction 定義了行內方向。這會影響元素在行內方向上的起始和結束位置，以及 padding-inline-end 屬性的結果。對于英文頁面，塊方向是向下，行內方向是從左到右。

設置行內方向結束處的內邊距：

div {
  padding-inline-end: 50px;
}

將 <div> 元素的 writing-mode 屬性值設置為 vertical-rl 時，行內方向是向下的。結果是元素的結束位置從右側移動到底部：

div {
  writing-mode: vertical-rl;
  padding-inline-end: 100px;
}

將 <div> 元素的 direction 屬性值設置為 rtl 時，行內方向是從右到左的。結果是元素的結束位置從右側移動到左側：

div {
  direction: rtl;
  padding-inline-end: 100px;
}

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

值	描述
auto	默認值。元素的默認 padding-inline-end 距離。
length	指定以 px、pt、cm 等為單位的距離。不允許負值。請參閱：CSS 單位。
%	指定相對于父元素在行內方向上大小的百分比距離。
initial	將此屬性設置為其默認值。參閱 initial。
inherit	從其父元素繼承此屬性。參閱 inherit。

默認值：	auto
繼承性：	否
動畫制作：	支持。請參閱：動畫相關屬性。
版本：	CSS3
JavaScript 語法：	object.style.paddingInlineEnd="100px"

表格中的數字表示首個完全支持該屬性的瀏覽器版本。

Chrome	Edge	Firefox	Safari	Opera
87.0	87.0	41.0	12.1	73.0