如何在CSS中不使用左右方向的情况下从相反/同侧给予元素空间?

Question

假设我在HTML中有两个按钮-

<button class="save">Save</button>
<button class="cancel">Cancel</button>

我想给cancel按钮一个距左侧10px的边距当它是LTRRTL右距10px.

使用Javascript，我可以做得很好，像这样-

let cancel = document.querySelector('.cancel');
// Suppose, the "direction" is an input variable.
cancel.style[direction == 'ltr' ? 'margin-left' : 'margin-right'] = '10px';

如果我给出一个例子，在下面的CSS属性中，我们只使用start和end值，它们会根据页面方向自动调整元素的左右方向。

text-align: end;
text-align: start;
justify-content: start;
align-items: end;

就像上面那样，我想知道是否有任何方法可以从相反/相同的方向设置空间(无论是边距还是内边距)，而不需要在CSS中提到右和左。

许多现代框架，如Vuetify处理这种情况(根据LTR和RTL设置空间)从他们的内置助手类(虽然JS或任何CSS属性必须在这些概念后面运行)，但问题是，这可能只使用CSS吗?

Answer 1

尝试margin-inline-start: (some value);，当您切换到RTL时，这会自动更改。

Answer 2

选项1:内嵌边距

.cancel {
margin-inline-start: 10px;
writing-mode: horizontal-tb;
direction: rtl;
}

选项2:在伪类之前

.cancel::before {
content: "";
display: inline-block;
width: 10px;
}