css - 为什么 CSS 中没有 min-margin 属性？

Question

想象一下，我想以.wrapper经典为中心margin: 0 auto; 但是当窗口缩小时，我想确保包装器至少有 20px 的边距。

房产在哪里min-margin？

或者更确切地说，我应该如何模拟这个？（身体上的填充物不是一个好的解决方案）

Answer 1

您可以使用CSS3 媒体查询来实现这一点。

@media screen and (max-width:200px) {
    .wrapper {
        width:160px;
        margin:0 20px;
    }
}

在这个示例媒体查询中，如果窗口的宽度不大于 200 像素，.wrapper则将被赋予 160 像素的绝对宽度和 20 像素的边距。

MDN 在这里详细介绍了媒体查询。

...我们有命令在这种特定情况下不使用媒体查询。

在这种情况下，您可以简单地为您的body元素添加填充：

body {
    padding:0 20px;
}

JSFiddle 演示。