我们可以在 css 中定义 minmargin 和 maxmargin、maxpadding 和 minpadding 吗

发布于10月16日

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

推荐答案

Yes, you can!个

或者，如果不是那些确切的术语，那么至少是次好的事情.2020年，使用CSS数学函数(min()、max()和clamp())可以非常简单地实现这一点.

min计算从逗号分隔的值列表(任意长度)中 Select 最小的值.这可用于定义最大填充或最大边距规则:

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

max计算同样从逗号分隔的值列表(任意长度)中选取最大值.这可用于定义最小填充或最小边距规则:

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

clamp需要三个值；minimum、preferred和maximum值的顺序.

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

MDN指定CLAMP实际上只是以下的简写:

max(MINIMUM, min(PREFERRED, MAXIMUM))

以下是一个clamp，用于在值100px和200px之间包含25vw边距:

* {
  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>

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

Here is the caniuse list of browser support.覆盖率一般都很好，包括几乎所有现代浏览器——似乎除了一些次要的移动浏览器，尽管我自己还没有测试过.