我们可以在 css 中定义 min-margin 和 max-margin、max-padding 和 min-padding 吗？

Question

我们可以在 CSSac 中定义 min-margin 和 max-margin , max-padding 和 min-padding 吗？

原文由 omkar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

是的你可以！

或者，如果不是这些条款，那么至少是下一个最好的事情。在 2020 年，现在使用 CSS 数学函数非常简单： min() 、 max() 和 clamp() 。

min 计算从逗号分隔的值列表（任意长度）中选择最小值。这可用于定义 max-padding 或 max-margin 规则：

 padding-right: min(50px, 5%);

max 计算类似地从逗号分隔的值列表（任意长度）中选择最大值。这可用于定义最小填充或最小边距规则：

 padding-right: max(15px, 5%);

A clamp 取三个值；按该顺序排列的 _最小值_、 首选 值和 _最大值_。

 padding-right: clamp(15px, 5%, 50px);

MDN 指定clamp 实际上只是以下的简写：

 max(MINIMUM, min(PREFERRED, MAXIMUM))

这是一个 clamp 用于包含 25vw 值之间的边距 100px 和 200px

 * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container {
  width: 100vw;
  border: 2px dashed red;
}

.margin {
  width: auto;
  min-width: min-content;
  background-color: lightblue;
  padding: 10px;
  margin-right: clamp(100px, 25vw, 200px);
}

 <div class="container">
  <div class="margin">
    The margin-right on this div uses 25vw as its preferred value,
    100px as its minimum, and 200px as its maximum.
  </div>
</div>

数学函数可以用于各种不同的场景，甚至可能是像缩放这样的模糊的场景 font-size - 它们不仅仅用于控制边距和填充。在本文顶部的 MDN 链接中查看完整的用例列表。

这是浏览器支持的 caniuse 列表。覆盖范围通常非常好，包括几乎所有现代浏览器——除了一些次要移动浏览器，尽管我自己没有测试过。

原文由 lawrence-witt 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

2020 年更新

使用新的（尚未在编辑草案中）CSS 4 属性，您可以通过使用 min() 和 max() 实现此目的（您也可以使用 clamp() -c30db- - min() 和 max() 的简写

clamp(MIN, VAL, MAX) 解析为 max(MIN, min(VAL, MAX))

min() 语法：

>  min( <calc-sum># )
>
> where
> <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*
>
> where
> <calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*
>
> where
> <calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )
>
> ```

`max()` 语法：

> ```
>  max( <calc-sum># )
>
> where
> <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*
>
> where
> <calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*
>
> where
> <calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )
>
> ```

`clamp()` 语法：

> ```
>  clamp( <calc-sum>#{3} )
>
> where
> <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*
>
> where
> <calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*
>
> where
> <calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )
>
> ```

### 片段

.min { /* demo */ border: green dashed 5px; /this your min padding-left/ padding-left: min(50vw, 50px); }

.max { /* demo */ border: blue solid 5px; /this your max padding-left/ padding-left: max(50vw, 500px); }

.clamp { /* demo */ border: red dotted 5px; /this your clamp padding-left/ padding-left: clamp(50vw, 70vw, 1000px); }

/* demo */

• { box-sizing: border-box }

section { width: 50vw; }

div { height: 100px }

/* end of demo */

* * *

### 旧答案

**不，你不能。**

[`margin`](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) 和 [`padding`](https://developer.mozilla.org/en/docs/Web/CSS/padding) 属性没有 `min` / `max` 前缀

一种近似的方法是使用相对单位（ `vh` / `vw` ），但仍然不是 `min/max`

正如@vigilante_stark 在 [回答](https://stackoverflow.com/a/50676703/3448527) 中指出的那样， `CSS calc()` 函数可能是另一种解决方法，如下所示：

/* demo */

• { box-sizing: border-box }

section { background-color: red; width: 50vw; height: 50px; position: relative; }

div { width: inherit; height: inherit; position: absolute; top: 0; left: 0 }

/* end of demo */

.min { /* demo */ border: green dashed 4px; /this your min padding-left/ padding-left: calc(50vw + 50px); }

.max { /* demo */ border: blue solid 3px; /this your max padding-left/ padding-left: calc(50vw + 200px); }

“`

原文由 dippas 发布，翻译遵循 CC BY-SA 4.0 许可协议