Hisia cha CSS margin-inline-start

Muhtasari na matumizi

margin-inline-start Mfano wa kushika ukufikia kwa kifungu cha kuzingatia kwa muda wa kwanza.

CSS 的 margin-inlinemargin-block 属性与 margin-topmargin-bottommargin-leftmargin-right 属性非常相似,但 margin-inlinemargin-block 属性依赖于块方向和行内方向。

注意:相关的 CSS 属性 writing-modedirection 定义了行内方向。这会影响元素的起始和结束位置,以及 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。允许负值。

请参阅:Matumizi ya ukingo wa CSS.

% 以行内方向上父元素大小的百分比指定 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

Tazama:Mfano wa writing-mode katika CSS