CSS中逻辑属性速记使用方法

米歇尔-巴克（Michelle Barker）发表了我最喜欢的某类博文：简短、实用，而且给你留下了有价值的小结。在这里，她谈到了CSS中的逻辑属性速记，特别是那些只在单一轴上设置长度的属性，比如只设置块（垂直）轴或只设置内联（水平）轴。

我说 "block "和 "inline "是因为，就逻辑属性而言，x轴也可以表现得像一个垂直轴，这取决于当前的writing-mode 。

因此，在我们一直有padding 、margin 、border 这些可以支持多值语法的短语的地方，没有一个允许我们在不同时设置其他轴上的长度的情况下声明特定轴的长度。

比如说：

/* This gives us margin on the inline axis */
margin: 0 3rem;

...但是我们必须设置另一个轴才能达到这个目的。然而，有了逻辑属性，我们对每个轴都有额外的速记方法，这意味着我们可以提示margin-inline 速记方法来专门对内联轴进行工作：

margin-inline: 3rem;

米歇尔顺便提到了我最喜欢的逻辑属性速记法。你有多少次把东西定位在这种调子上：

.position-me {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

我们可以用inset: 0 ，让这四行进入in。或者我们可以直接用inset-block 和inset-inline 来定位块和内联轴。

当我们在谈论速记时，我总是喜欢对"意外的 "CSS重设提出警告。这只是我常犯的CSS错误之一。