margin-inline-end CSS 属性定义元素的逻辑行末外边距，根据元素的书写模式、行内方向和文本朝向映射为实体外边距。换句话说，它根据 {{cssxref("writing-mode")}}、{{cssxref("direction")}} 和 {{cssxref("text-orientation")}} 属性的值对应于 {{cssxref("margin-top")}}、{{cssxref("margin-right")}}、{{cssxref("margin-bottom")}} 或 {{cssxref("margin-left")}} 属性。

```css interactive-example-choice margin-inline-end: 20px; writing-mode: horizontal-tb;


```css interactive-example-choice
margin-inline-end: 20px;
writing-mode: vertical-rl;

```css interactive-example-choice margin-inline-end: 20%; writing-mode: horizontal-tb; direction: rtl;


```html interactive-example
<section id="default-example">
  <div id="container">
    <div class="col">One</div>
    <div class="col transition-all" id="example-element">Two</div>
    <div class="col">Three</div>
  </div>
</section>

```css interactive-example

container {

width: 300px; height: 200px; display: flex; align-content: flex-start; justify-content: flex-start; }

.col { width: 33.33%; border: solid #ce7777 10px; background-color: #2b3a55; color: white; flex-shrink: 0; }

example-element {

border: solid 10px #ffbf00; background-color: #2b3a55; unicode-bidi: bidi-override; }


## 语法

```css
/* <length> 值 */
margin-inline-end: 10px; /* 绝对长度 */
margin-inline-end: 1em; /* 相对于文字大小 */
margin-inline-end: 5%; /* 相对于最近区块容器的宽度 */

/* 关键词值 */
margin-inline-end: auto;

/* 全局值 */
margin-inline-end: inherit;
margin-inline-end: initial;
margin-inline-end: revert;
margin-inline-end: revert-layer;
margin-inline-end: unset;

这个属性与 {{cssxref("margin-block-start")}}、{{cssxref("margin-block-end")}} 和 {{cssxref("margin-inline-start")}} 属性相关，它们均定义元素的其他边距。

值

margin-inline-end 属性接受与 {{cssxref("margin-left")}} 属性相同的值。

形式定义

形式语法

示例

设置逻辑行末外边距

HTML

<div>
  <p class="exampleText">示例文本</p>
</div>

CSS

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  margin-inline-end: 20px;
  background-color: #c8c800;
}

w3study.net