CSS margin-inline-start 屬性

定義和用法

margin-inline-start 屬性指定行內方向起始端的外邊距。

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

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

設置行內方向起始端的外邊距：

div {
  margin-inline-start: 35px;
}

當 <div> 元素的 writing-mode 屬性值設置為 'vertical-rl' 時，行內方向是向下。結果是元素的起始端從左側移動到頂部：

div {
  margin-inline-start: 50px;
  writing-mode: vertical-rl;
}

當 <div> 元素的 direction 屬性值設置為 'rtl' 時，行內方向是從右到左。結果是元素的起始端在視覺上仍然是從原本左側的位置開始應用外邊距，但因為方向是從右到左，所以實際布局效果會有所不同：

div {
  margin-inline-start: 50px;
  direction: rtl;
}

margin-inline-start: auto|length|initial|inherit;

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

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

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

Chrome	Edge	Firefox	Safari	Opera
69.0	79.0	68.0	14.1	56.0