Hisia cha CSS margin-inline-start
- Mchezo wa kwanza margin-inline-end
- Mchezo wa kina margin-left
Muhtasari na matumizi
margin-inline-start
Mfano wa kushika ukufikia kwa kifungu cha kuzingatia kwa muda wa kwanza.
CSS 的 margin-inline
和 margin-block
属性与 margin-top
、margin-bottom
、margin-left
和 margin-right
属性非常相似,但 margin-inline
和 margin-block
属性依赖于块方向和行内方向。
注意:相关的 CSS 属性 writing-mode
和 direction
定义了行内方向。这会影响元素的起始和结束位置,以及 margin-inline-start
属性的结果。对于英文页面,块方向是向下,行内方向是从左到右。
实例
例子 1
设置行内方向起始端的外边距:
div { margin-inline-start: 35px; }
例子 2
当
元素的
writing-mode
属性值设置为 'vertical-rl' 时,行内方向是向下。结果是元素的起始端从左侧移动到顶部:
div { margin-inline-start: 50px; writing-mode: vertical-rl; }
例子 3
当
元素的
direction
属性值设置为 'rtl' 时,行内方向是从右到左。结果是元素的起始端在视觉上仍然是从原本左侧的位置开始应用外边距,但因为方向是从右到左,所以实际布局效果会有所不同:
div { margin-inline-start: 50px; direction: rtl; }
CSS 语法
margin-inline-start: auto|length|initial|inherit;
属性值
值 | 描述 |
---|---|
auto | 默认值。元素的默认 margin-inline-start 值。 |
length |
以 px、pt、cm 等单位指定 margin-inline-start。允许负值。 |
% | 以行内方向上父元素大小的百分比指定 margin-inline-start。 |
initial | Inasababisha kwa kuzingatia chaguo cha kuzingatia kwa kifaa hiki. Angalia: initial. |
inherit | Inaingia kwa kuzingatia kifaa cha baba kwa kufaa hiki. Angalia: inherit. |
Maelezo ya mbinu
Chaguo cha kuzingatia: | auto |
---|---|
Inakwenda: | Hakuna |
Harakisha: | Inasaidia:Jambo la hali ya harakisha. |
Toleo: | CSS3 |
Inayotumia Kiingereza: | object.style.marginInlineStart="50px" |
Mfano wa kufaa
Jumla za kifaa cha kwanza cha kufaa kwa sababu ya kifaa hiki ni toleo la kwanza kinakusaidia kufaa hiki.
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
69.0 | 79.0 | 68.0 | 14.1 | 56.0 |
Mawasiliano ya hivi karibuni
Tazama:Hisia CSS direction
Tazama:Hisia cha CSS margin-inline-end
Tazama:Mafuta wa CSS margin-bottom
Tazama:Hisia cha CSS margin-inline
Tazama:Hisia cha CSS margin-left
Tazama:Hisia cha CSS margin-right
Tazama:Hisia cha CSS margin-top
- Mchezo wa kwanza margin-inline-end
- Mchezo wa kina margin-left