ຜະລິດຖານ 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。允许负值。 |
% | 指定相对于父元素在行方向上大小的百分比 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 |
ບັນດາໜ້າທີ່ກ່ຽວຂ້ອງ
ອີງຕາມ:ປະກອບສັນຍາ CSS direction
ອີງຕາມ:ຜະລິດຖານ margin-inline-end
ອີງຕາມ:ຜະລິດຖານ margin-inline-start
ອີງຕາມ:ລະບົບ CSS margin-bottom
ອີງຕາມ:ຜະລິດຖານ margin-inline
ອີງຕາມ:ຜະລິດຖານ margin-left
ອີງຕາມ:ຜະລິດຖານ margin-right
ອີງຕາມ:ຜະລິດຖານ margin-top
ອີງຕາມ:ລະບຽບ writing-mode
- ບ່ອນໄປຫຼັງ margin-bottom
- ບ່ອນໄປຕໍ່ໄປ margin-inline-end