主要观点：当写很多 CSS 时，常遇到不知如何实现目标的情况，偶尔会想出不太好的解决方案。CSS 在过去十年成熟很多，现在有margin-trim属性。margin-trim可让容器修剪子元素的边距，消除子元素与容器间的边距空间，对子孙元素也有效。如在有article元素和内部段落且有边距、容器有内边距的实际例子中，使用margin-trim可轻松达到理想排版效果。可在 Safari 16.4 或更高版本的此实时演示中尝试margin-trim，目前只有 Safari 支持，对于不支持的浏览器可写回退代码。margin-trim的值为逻辑值，可组合使用，2024 年 12 月 CSSWG 决定允许更短的block和inline关键字组合，WebKit 已在为此做工作。希望大家了解并使用margin-trim写出更健壮的代码，可在 Bluesky 或 Mastodon 上分享想法。

关键信息：

• margin-trim属性可消除子元素与容器间的边距空间。
• 支持的浏览器为 Safari，可在特定版本的 Safari 中尝试margin-trim。
• 对于不支持的浏览器可写回退代码，如使用:first-child和:last-child。
• margin-trim的值为逻辑值，可组合使用，未来可能允许更短的关键字组合。

重要细节：

• 示例中通过设置article的margin-trim属性来控制边距修剪，如margin-trim: block可修剪上下边距。
• 回退代码中通过@support not (margin-trim: block)来判断浏览器是否支持margin-trim，并在不支持时对首末段落的边距进行处理。
• margin-trim的值包括none、block、inline等逻辑值，可组合使用。