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

相关推荐
呆呆的心4 小时前
前端必学:从盒模型到定位,一篇搞定页面布局核心 🧩
前端·css
AA-代码批发V哥5 小时前
CSS之布局详解指南
css
拾光拾趣录7 小时前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css
FogLetter7 小时前
图片懒加载:让网页飞起来的魔法技巧 ✨
前端·javascript·css
FogLetter8 小时前
前端性能优化:深入理解回流与重绘
前端·css
浪裡遊10 小时前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
拾光拾趣录11 小时前
CSS全面指南:从基础布局到高级技巧与实践
前端·css
Codebee11 小时前
OneCode图生代码技术深度解析:从可视化设计到注解驱动实现的全链路架构
css·人工智能·算法
zhanshuo11 小时前
i18next + 原生JS 双引擎:打造前端多语言系统最佳实践
前端·javascript·css
十盒半价11 小时前
前端性能优化避坑指南:从回流重绘到页面渲染全解析
前端·css·trae