CSS margin-trim

2023-12-16 10:34:21

margin-trim

🧪这是一个实验性的属性, 目前仅有 Safari 支持

看这个属性的名字就知道, 外边距修剪.

平常都会遇到一些排版上的问题, 比如垂直排列的元素之间增加下外边距

<div>
  <li>123</li>
  <li>456</li>
  <li>789</li>
  <li>000</li>
</div>

div {
  padding: 10px;
}
div > li {
  margin-bottom: 10px;
}
</style>

在这里插入图片描述

但是通常我们不希望最后一个元素增加下外边距, 因为列表容器已经有了下内边距, 因此需要对最后一个元素做特殊处理

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

在这里插入图片描述

主角登场

说到这里 margin-trim 可以做什么呢? 哎, 把 margin-trim 加在列表元素的父容器上, 父容器就会修剪子元素和父容器相邻的子元素的外边距.

 div {
  padding: 10px;
  margin-trim: block; // 主角在这
}
div > li {
  margin-bottom: 10px;
}
/* li:last-child {
  margin-bottom: 0;
} */

我们从下图看到, 虽然每个子元素的下边距都是 10px, 但是和父容器相邻的子元素的外边距却被裁减了.

在这里插入图片描述

语法

在上面的例子我们通过 block 属性指定只能修剪逻辑块方向的外边距, 其实 margin-trim 的值可以是下面的任何一个

  • none
  • block
  • block-start
  • block-end
  • inline
  • inline-start
  • inline-end

主角的局限性

然而, 我们的主角还没有得到 Safari 的全部支持, 因为在内联方向上的 margin 裁减没!有!效!果!

在这里插入图片描述

在这里插入图片描述

为什么会这样呢? 因为在 inline 方向上的裁剪效果还没有定

在这里插入图片描述

兼容性

仅 Safari >= 16.4 才支持

在这里插入图片描述
谢谢你看到这里😊

文章来源:https://blog.csdn.net/broken_promise/article/details/135028916
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。