CSS margin-inline 屬性
- 上一頁 margin-bottom
- 下一頁 margin-inline-end
定義和用法
margin-inline 屬性指定行方向上開始和結束時的外邊距，是以下屬性的簡寫屬性：
margin-inline 屬性的值可以通過不同方式設置：
如果 margin-inline 屬性有兩個值：
margin-inline: 10px 50px;
- 開始時的外邊距是 10px
- 結束時的外邊距是 50px
如果 margin-inline 屬性有一個值：
margin-inline: 10px;
- 開始和結束時的外邊距都是 10px
CSS 的 margin-inline 和 margin-block 屬性與 margin-top、margin-bottom、margin-left 和 margin-right 屬性非常相似，但 margin-inline 和 margin-block 屬性依賴于塊方向和行內方向。
注意：相關的 CSS 屬性 writing-mode 和 direction 定義了行內方向。這會影響元素的起始和結束位置，以及 margin-inline-end 屬性的結果。對于英文頁面，塊方向是向下，行內方向是從左到右。
實例
例子 1
設置行方向上兩側的外邊距：
div {
margin-inline: 35px;
}
例子 2
當 <div> 元素的 writing-mode 屬性值設置為 'vertical-rl' 時，行方向是向下。結果是元素的起始位置從左側移動到頂部，結束位置從右側移動到底部：
div {
margin-inline: 10px 50px;
writing-mode: vertical-rl;
}
例子 3
當 <div> 元素的 direction 屬性值設置為 'rtl' 時，行方向是從右到左。結果是元素的起始位置從左側移動到右側，結束位置從右側移動到左側：
div {
margin-inline: 10px 50px;
direction: rtl;
}
CSS 語法
margin-inline: auto|length|initial|inherit;
屬性值
| 值 | 描述 |
|---|---|
| auto | 默認值。元素的默認 margin-inline 值。 |
| length |
指定以 px、pt、cm 等為單位的 margin-inline。允許負值。 請參閱：CSS 單位。 |
| % | 指定相對于父元素在行方向上大小的百分比 margin-inline。 |
| initial | 將此屬性設置為其默認值。參閱 initial。 |
| inherit | 從其父元素繼承此屬性。參閱 inherit。 |
技術細節
| 默認值： | auto |
|---|---|
| 繼承性： | 否 |
| 動畫制作： | 支持。請參閱：動畫相關屬性。 |
| 版本： | CSS3 |
| JavaScript 語法： | object.style.marginInline="50px 10px" |
瀏覽器支持
表格中的數字表示首個完全支持該屬性的瀏覽器版本。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 87.0 | 87.0 | 66.0 | 14.1 | 73.0 |
相關頁面
- 上一頁 margin-bottom
- 下一頁 margin-inline-end
