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

Question

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

min-margin属性在哪里？

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

Answer 1

您可以使用CSS3 Media Queries实现此目的。

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

在此示例媒体查询中，如果窗口的宽度不大于200px，.wrapper的绝对宽度为160px，两边的边距为20px。

MDN详细介绍了媒体查询here。

  

...在这种特殊情况下，我们的工作订单不使用媒体查询。

在这种情况下，您只需向body元素添加填充：

body {
    padding:0 20px;
}

JSFiddle demo