如何在不使用 CSS 中的左右方向的情況下從相反/相同的一側給元素空間？

Question

假設，我在 HTML 中有兩個按鈕-

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

當LTR時，我想給cancel按鈕一個 10px 的邊距，當它是RTL時，我想給它從右邊 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;
}

方案二：偽類之前

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