CSS margin-trim

最新推荐文章于 2024-10-15 20:19:31 发布

庇耳拉海莱

最新推荐文章于 2024-10-15 20:19:31 发布

阅读量1.1k

点赞数

分类专栏： css 文章标签： css 前端

本文链接：https://blog.csdn.net/broken_promise/article/details/135028916

版权

51 篇文章 2 订阅

订阅专栏

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 的值可以是下面的任何一个

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

在这里插入图片描述

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

在这里插入图片描述

仅 Safari >= 16.4 才支持

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

关注

专栏目录