writing-mode改变排版方向后盒模型边距如何映射？
writing-mode属性通过改变文本流的方向，会重新定义盒模型的逻辑边距属性。具体做法是将物理方向的 margin-top、margin-right、margin-bottom 和 margin-left 分别映射为 margin-block-start、margin-inline-end、margin-block-end 和 margin-inline-start。例如在垂直书写模式下，margin-top 对应逻辑上的块起始边距，而 margin-left 对应行内结束边距。这种映射确保了无论文本是水平还是垂直排列，边距始终相对于文本流的“开始”和“结束”方向保持一致。
水平模式下的边距映射关系是怎样的？
在默认的 horizontal-tb（水平从上到下）模式下，逻辑边距与物理边距的映射是一一对应的。margin-block-start 等同于 margin-top，margin-inline-end 等同于 margin-right，margin-block-end 等同于 margin-bottom，margin-inline-start 等同于 margin-left。这意味着在水平布局中，逻辑属性和物理属性的行为完全一致，开发者可以互换使用它们而不影响视觉效果。
/* CSS 示例：水平模式下的逻辑边距 */
.box {
writing-mode: horizontal-tb;
margin-block-start: 10px; /* 等同于 margin-top: 10px */
margin-inline-end: 20px; /* 等同于 margin-right: 20px */
margin-block-end: 30px; /* 等同于 margin-bottom: 30px */
margin-inline-start: 40px;/* 等同于 margin-left: 40px */
}
垂直模式下的边距映射关系是怎样的？
当 writing-mode 设置为 vertical-lr（垂直从左到右）或 vertical-rl（垂直从右到左）时，映射关系发生显著变化。此时，margin-block-start 仍然对应 margin-top（因为块方向仍然是垂直的），但 margin-inline-start 和 margin-inline-end 将对应水平方向的边距。具体来说，在 vertical-lr 中，margin-inline-start 对应 margin-left，margin-inline-end 对应 margin-right；而在 vertical-rl 中，margin-inline-start 对应 margin-right，margin-inline-end 对应 margin-left。这种映射使得边距始终跟随文本行的起始和结束位置。
/* CSS 示例：垂直模式下的逻辑边距 */
.vertical-box {
writing-mode: vertical-lr;
margin-block-start: 10px; /* 依然对应 top */
margin-inline-start: 20px;/* 对应 left (inline start) */
margin-inline-end: 30px; /* 对应 right (inline end) */
margin-block-end: 40px; /* 依然对应 bottom */
}
基于程序中某个输入、条件或结果的具体问题
如果在一个 vertical-rl 模式的容器中，设置 margin-inline-start: 50px，该边距实际作用于元素的哪一侧？答案是右侧。因为在 vertical-rl 模式下，文本流从右向左垂直排列，行内起始方向（inline-start）即为视觉上的右侧。因此，margin-inline-start 会表现为 margin-right 的效果，使元素向右偏移 50px。这一行为可以通过上述代码验证，确保在不同书写模式下边距的正确应用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
