【第3518期】使用 margin-trim 更轻松地布局

正文

请到「今天看啥」查看全文

同样的文本布局示例，此时加上了颜色辅助线来分别标记 padding 和 margin 的位置。

结果我们发现，第一段和最后一段的外边距（1lh）与容器的 padding（2lh）相加，导致在垂直方向上的空隙达到了 3lh。

从 设计 角度来看，如果能去掉第一段上方的 margin 和最后一段下方的 margin，效果会更理想。在没有 margin-trim 之前，我们可能会试着手动去除第一段和最后一段的 margin，或者减少 padding，但这些做法都依赖于容器内的具体内容。有时候文章以标题开头，这个标题的上边距就可能不同；又或者以图片开头，图片可能根本没有 margin。

如果我们无法确定容器中具体会放什么内容，就很难保证最终的排版效果如我们所愿。而现在，有了新属性 margin-trim ，我们就可以直接告诉浏览器我们想要什么效果：请把紧贴容器边缘的外边距裁掉。

比如这样写：

article {
    margin-trim: block;
    padding: 2lh;
    background: white;
    p{
        margin-block: 1lh;
    }
}

现在，浏览器会自动把在 block 方向（即上下方向）紧贴

边缘的外边距裁剪掉。

【第3479期】UI 设计中的错误信息准则

同样的文本示例，此时上下的 margin 被裁剪了，原本标记 margin 的颜色条现在已经不见了。

注意：虽然 margin 是设置在

元素上的，但 margin-trim 是设置在

元素上的。这个属性始终是应用在容器上的，而不是那些本身有 margin 的子元素上。

最终效果

去掉了辅助线的示例，现在我们看到的是一个干净整齐的排版效果 —— 上下与左右的留白完全一致。

自己试试看

你可以在 Safari 16.4 或更高版本 中使用 live demo 亲自试试看

请到「今天看啥」查看全文