常见情况 由 Dave Rupert 文档化
假设您正在制作一个博客文章布局。内容在 WYSIWYG 编辑器字段中的 CMS 中输入。您将该内容回显到页面。您在移动设备上打开它，发现段落从边缘到边缘。哎呀，这有点不舒服。因此，您可能使用
div.container添加了一些左右填充。这非常有效，直到客户要求图像和视频全版显示。您通用的填充解决方案不再有效。
您有选择。容器化在任何情况下都不理想。那么如何提取那些全版元素呢？Dave 使用了我称之为反向白名单的方法。假设您希望图像和视频全版显示，但其他所有内容都需要边缘填充
.post > *:not( img ):not( video ) {
margin-left: auto;
margin-right: auto;
max-width: 50rem;
padding-left: 5%;
padding-right: 5%;
}他使用 :not() 来选择除图像或视频以外的所有内容。这些就是白名单。比维护包含所有可能 HTML 元素的黑名单更容易。
我在 CSS-Tricks 上的这个设计中使用了它，但没有对所有内容应用填充，而是使用了一个容器，并使用负边距将白名单项目拉到边缘。我认为 Dave 的想法更好。