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

相关推荐
asleep7011 小时前
第8章利用CSS制作导航菜单
前端·css
风尚云网6 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
酷酷的威朗普9 小时前
医院绩效考核系统
javascript·css·vue.js·typescript·node.js·echarts·html5
渊兮兮9 小时前
Vue3 + TypeScript +动画,实现动态登陆页面
前端·javascript·css·typescript·动画
土豆湿10 小时前
拥抱极简主义前端开发:NoCss.js 引领无 CSS 编程潮流
开发语言·javascript·css
鸽鸽程序猿13 小时前
【前端】CSS
前端·css
爱上语文1 天前
HTML和CSS 表单、表格练习
前端·css·html
小肚肚肚肚肚哦1 天前
盘点浏览器盒模型中各种 width、height 、边距和位置属性
css·html
NightCyberpunk1 天前
HTML、CSS
前端·css·html
南城FE1 天前
12个更现代化的CSS单行优化技巧
前端·css