新的 CSS 属性 margin-trim

新的 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-startblock-endinline-start和4 个方向中的任何一个inline-endblockinline还可以单独使用。

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

相关推荐
黎金安3 小时前
前端第二次作业
前端·css·css3
阳光开朗大男孩 = ̄ω ̄=4 小时前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
小马哥编程6 小时前
【前端基础】CSS基础
前端·css
Justinc.6 小时前
CSS3新增边框属性(五)
前端·css·css3
fruge7 小时前
纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码
javascript·css·css3
As977_7 小时前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu10830189117 小时前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
我要洋人死10 小时前
导航栏及下拉菜单的实现
前端·css·css3
小白白一枚11121 小时前
css实现div被图片撑开
前端·css
@蒙面大虾21 小时前
CSS综合练习——懒羊羊网页设计
前端·css