我们可以在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屋!