新的 CSS 属性 margin-trim

新的 CSS 属性 margin-trim

CSS 中最烦人的事情之一就是边距。它们与折叠有奇怪的相互作用，并且通常会在您不想要的地方产生额外的间距。当迁移到基于组件的设计系统时，这会变得更加痛苦，因为现在您需要确保组件都能很好地彼此协作，而不会将样式泄漏到外部。

新margin-trim属性可以轻松地从元素的子元素中删除多余的边距，从而帮助解决部分问题。

问题

假设我们有一张简单的卡片，里面有一个孩子的列表。

<div class="card">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
  <div class="child">Child 3</div>
</div>

.card {
  background-color: var(--accent-color);
  padding: 1rem;
}

.child {
  margin-bottom: 2rem;
}

这将导致以下结果：

正如您所看到的，最后一个子项的底部边距迫使卡片底部有额外的空间，这使得卡片比应有的高度高。:last-child如果我们通过使用选择器删除最后一个子项的边距来更改 CSS，那么解决这个问题相对容易。

.child {
  margin-bottom: 1rem;
}

.child:last-child {
  margin-bottom: 0;
}

这将导致以下结果：

这可行，但并不理想，因为该代码在基于组件的系统中不能很好地工作。我们的子组件需要知道父组件想要从中删除边距。这并不理想，因为这意味着子组件现在已耦合到父组件。我们可以像这样编写 CSS，以便父组件处理所有事情。

.card {
  background-color: var(--accent-color);
  padding: 1rem;
}

.card > :last-child {
  margin-bottom: 0;
}

但这仍然不理想，因为现在我们选择父组件外部的元素，这破坏了组件的封装。这就是margin-trim房产的用武之地。

margin-trim解决方案

该margin-trim属性是一个非常简单的属性，允许您指定应修剪元素的哪些边缘，并将删除这些边缘的所有多余间距。这意味着我们现在可以这样编写 CSS：

.card {
  background-color: var(--accent-color);
  padding: 1rem;
  margin-trim: block-end;
}

.child {
  margin-bottom: 1rem;
}

这将导致以下结果：

正如您所看到的，该margin-trim属性删除了卡片底部的额外边距，而我们无需编写任何额外的 CSS。

此属性可用于block-start、block-end、inline-start和4 个方向中的任何一个inline-end。block和inline还可以单独使用。

.card {
  /* All these assume the direction is left to right, top to bottom */
  margin-trim: block; /* Removes from top and bottom */
  margin-trim: inline; /* Removes from left and right */
  margin-trim: block-start block-end; /* Removes from top and bottom */
  margin-trim: inline-start; /* Removes from left */
}

通过使用，margin-trim我们能够将所有 CSS 保留在组件内，而不需要任何复杂的子选择器或:last-child选择器，这使得维护和重构我们的代码变得更加容易。

浏览器支持

不幸的是，Safari 是唯一支持此功能的浏览器，导致在撰写本文时所有浏览器中只有14% 的支持。希望在接下来的几个月/几年里，随着更多的浏览器支持这个有用的属性，这个数字将会增加。

结论

该margin-trim属性是一个非常简单但非常有用的属性，可以轻松地从元素的子元素中删除额外的边距。这使得在基于组件的设计系统中使用组件变得更加容易，因为您不再需要担心父/子组件将样式泄漏到自身之外。