我们可以在css中定义最小边距和最大边距,最大填充和最小填充吗？

Question

我们可以定义min-margin和max-margin,max-padding并min-padding在CSS？

Answer 1

是的你可以！

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

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

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

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

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

Aclamp取三个值；所述最小，优选的，并且最大值，以该顺序。

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

MDN 规定，clamp 实际上只是以下内容的简写：

max(MINIMUM, min(PREFERRED, MAXIMUM))

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

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

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

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

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

Answer 2

不,你不能.

margin和padding属性没有min/ max前缀

近似的方式是使用相对单位(vh/ vw),但仍然没有min/max

正如@vigilante_stark在答案中指出的那样,该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);
}

<section>
  <div class="min"></div>
  <div class="max"></div>
</section>

Answer 3

我今天面临同样的问题.显然,解决方案就像使用一样简单:

padding: calc(*put fixed pixels here*px + *put your required %age here*%) 

请注意,您必须稍微减少所需的%年龄以考虑固定像素.

Answer 4

不幸的是你不能。
我尝试使用 CSSmax函数padding来尝试此功能，但在我的 css 中出现解析错误。以下是我尝试过的：

padding: 5px max(50vw - 350px, 10vw);

然后我尝试将操作分成变量，但这也不起作用

  --padding: calc(50vw - 350px); 
  --max-padding: max(1vw, var(--padding));
  padding: 5px var(--max-padding);

最终起作用的只是将我想要填充的内容嵌套在具有“居中”类的 div 中，并像这样使用最大宽度和宽度

 .centered {
   width: 98vw;
   max-width: 700px;
   height: 100%;
   margin: 0 auto;
}

不幸的是，这似乎是模仿“最大填充”和“最小填充”的最佳方式。我想“最小边距”和“最大边距”的技术是相似的。希望这会在某个时候添加！