易记域名网站大全,常用ppt模板网站,企业网站推荐,做网络推广的方法margin-trim 主角登场主角的局限性兼容性 margin-trim #x1f9ea;这是一个实验性的属性, 目前仅有 Safari 支持 看这个属性的名字就知道, 外边距修剪.
平常都会遇到一些排版上的问题, 比如垂直排列的元素之间增加下外边距
divli123/lili…margin-trim 主角登场主角的局限性兼容性 margin-trim 这是一个实验性的属性, 目前仅有 Safari 支持 看这个属性的名字就知道, 外边距修剪.
平常都会遇到一些排版上的问题, 比如垂直排列的元素之间增加下外边距
divli123/lili456/lili789/lili000/li
/divdiv {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 的值可以是下面的任何一个
noneblockblock-startblock-endinlineinline-startinline-end
主角的局限性
然而, 我们的主角还没有得到 Safari 的全部支持, 因为在内联方向上的 margin 裁减没!有!效!果! 为什么会这样呢? 因为在 inline 方向上的裁剪效果还没有定 兼容性
仅 Safari 16.4 才支持 谢谢你看到这里
