新的 CSS 属性 margin-trim
CSS 中最烦人的事情之一就是边距。它们与折叠有奇怪的相互作用,并且通常会在您不想要的地方产生额外的间距。当迁移到基于组件的设计系统时,这会变得更加痛苦,因为现在您需要确保组件都能很好地彼此协作,而不会将样式泄漏到外部。
新margin-trim
属性可以轻松地从元素的子元素中删除多余的边距,从而帮助解决部分问题。
问题
假设我们有一张简单的卡片,里面有一个孩子的列表。
ini
<div class="card">
<div class="child">Child 1</div>
<div class="child">Child 2</div>
<div class="child">Child 3</div>
</div>
css
.card {
background-color: var(--accent-color);
padding: 1rem;
}
.child {
margin-bottom: 2rem;
}
这将导致以下结果:
正如您所看到的,最后一个子项的底部边距迫使卡片底部有额外的空间,这使得卡片比应有的高度高。:last-child
如果我们通过使用选择器删除最后一个子项的边距来更改 CSS,那么解决这个问题相对容易。
css
.child {
margin-bottom: 1rem;
}
.child:last-child {
margin-bottom: 0;
}
这将导致以下结果:
这可行,但并不理想,因为该代码在基于组件的系统中不能很好地工作。我们的子组件需要知道父组件想要从中删除边距。这并不理想,因为这意味着子组件现在已耦合到父组件。我们可以像这样编写 CSS,以便父组件处理所有事情。
css
.card {
background-color: var(--accent-color);
padding: 1rem;
}
.card > :last-child {
margin-bottom: 0;
}
但这仍然不理想,因为现在我们选择父组件外部的元素,这破坏了组件的封装。这就是margin-trim
房产的用武之地。
margin-trim
解决方案
该margin-trim
属性是一个非常简单的属性,允许您指定应修剪元素的哪些边缘,并将删除这些边缘的所有多余间距。这意味着我们现在可以这样编写 CSS:
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
还可以单独使用。
css
.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
属性是一个非常简单但非常有用的属性,可以轻松地从元素的子元素中删除额外的边距。这使得在基于组件的设计系统中使用组件变得更加容易,因为您不再需要担心父/子组件将样式泄漏到自身之外。