我们可以在CSS中定义最小边距和最大边距，最大填充和最小填充吗? [英] Can we define min-margin and max-margin, max-padding and min-padding in css?

问题描述

我们可以在其中定义 min-margin 和 max-margin ， max-padding 和 min-padding CSS吗?

Can we define min-margin and max-margin, max-padding and min-padding in CSS ?

推荐答案

是的，可以！

或者如果这些术语不完全相同，那么至少是次佳的选择.在2020年，使用CSS数学函数可以很简单地做到这一点: min()， max()和 clamp().

Or if not those terms exactly, then at least the next best thing. In 2020 this is now very straightforward using the CSS math functions: min(), max(), and clamp().

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

A min calculation picks the smallest from a comma separated list of values (of any length). This can be used to define a max-padding or max-margin rule:

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

max 计算类似地从逗号分隔的值列表(任意长度)中选择最大值.这可以用来定义最小填充或最小边距规则:

A max calculation similarly picks the largest from a comma separated list of values (of any length). This can be used to define a min-padding or min-margin rule:

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

clamp 带有三个值；最小，首选和最大值，按此顺序.

A clamp takes three values; the minimum, preferred, and maximum values, in that order.

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

MDN指定钳位实际上只是以下内容的简写:

MDN specifies that clamp is actually just shorthand for:

max(MINIMUM, min(PREFERRED, MAXIMUM))

这里是一个 clamp ，用于在 100px 和 200px 值之间包含 25vw 裕度:

Here is a clamp being used to contain a 25vw margin between the values 100px and 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链接中查看用例的完整列表.

The math functions can be used in all sorts of different scenarios, even potentially obscure ones like scaling font-size - they are not just for controlling margin and padding. Check out the full list of use cases at the MDN links at the top of this post.

这是浏览器支持的提示列表.覆盖范围通常非常好，包括几乎所有现代浏览器-除了一些二手移动浏览器，它似乎都例外，尽管我自己并未对此进行测试.

Here is the caniuse list of browser support. Coverage is generally very good, including almost all modern browsers - with the exception, it appears, of some secondary mobile browsers although have not tested this myself.

这篇关于我们可以在CSS中定义最小边距和最大边距，最大填充和最小填充吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！