我们可以在 CSS 中定义 min-margin 和 max-margin、max-padding 和 min-padding 吗？
【问题讨论】：
是的，你可以！
或者，如果不完全是这些术语，那么至少是下一个最好的东西。在 2020 年，现在使用 CSS 数学函数非常简单：min()、max() 和 clamp()。
min 计算从逗号分隔的值列表（任意长度）中选择最小值。这可用于定义 max-padding 或 max-margin 规则：
padding-right: min(50px, 5%);
max 计算类似地从逗号分隔的值列表（任意长度）中选择最大值。这可用于定义最小填充或最小边距规则：
padding-right: max(15px, 5%);
clamp 取三个值； 最小值、首选和最大值值，按顺序排列。
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>数学函数可用于各种不同的场景，甚至是像缩放font-size 这样可能不明显的场景——它们不仅仅用于控制边距和填充。在本文顶部的 MDN 链接中查看完整的用例列表。
Here is the caniuse list of browser support。覆盖范围通常非常好，包括几乎所有现代浏览器 - 除了一些次要的移动浏览器，尽管我自己还没有测试过。
【讨论】：
使用新的（尚未在编辑草稿中）CSS 4 属性，您可以使用min() 和max() 来实现此目的（您也可以使用clamp() 作为min() 和@ 的一种简写形式987654331@
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 */<section>
<div class="min"></div>
<div class="max"></div>
<div class="clamp"></div>
</section>不，你不能。
margin 和 padding 属性没有 min/max 前缀
一种近似的方法是使用相对单位 (vh/vw)，但仍然不是 min/max
正如@vigilante_stark 在the answer 中指出的那样，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>【讨论】：
我今天也遇到了同样的问题。显然解决方案就像使用一样简单：
padding: calc(*put fixed pixels here*px + *put your required %age here*%)
请注意，您必须稍微减少所需的 %age 才能考虑固定像素。
【讨论】：
很遗憾你不能。
我尝试使用 padding 中的 CSS max 函数来尝试此功能，但我的 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;
}
不幸的是，这似乎是模仿“最大填充”和“最小填充”的最佳方式。我想“最小边距”和“最大边距”的技术将是相似的。希望这会在某个时候添加！
【讨论】：
margin 和 padding 没有最小或最大前缀。有时您可以尝试以百分比的形式指定边距和内边距，使其随屏幕尺寸变化。
此外，您还可以使用 min-width、max-width、min-height 和 max-height 来做类似的事情。
希望对你有帮助。
【讨论】：
您还可以使用@media 查询来确定您的最大/最小填充/边距（但仅根据屏幕大小）：
假设您希望最大填充为 8px，您可以执行以下操作
div {
padding: 1vh 0;
}
@media (max-height: 800px) {
div {
padding: 8px 0;
}
}
【讨论】：
我想我刚刚遇到了一个类似的问题，我试图将登录框（如 gmail 登录框）居中。调整窗口大小时，只要浏览器窗口变得比框小，中心框就会溢出浏览器窗口（顶部）。因此，在小窗口中，即使向上滚动，顶部的内容也会丢失。
我能够通过将我使用的居中方法替换为“margin：auto”将盒子在其容器中居中的方式来解决此问题。这可以防止盒子在我的情况下溢出，保持所有内容可用。 （最小边距似乎为 0）。
祝你好运！
edit: margin: auto 仅在父元素的显示属性设置为“flex”时才能垂直居中。
【讨论】：
聚会迟到了，但我想分享我的简单解决方案。
我假设如果我们想要像最小边距一样工作的东西，那是因为我们首先有一个margin: auto;，我们不希望该边距自动小于某个数字。
我们可以用两个 div 做到这一点，一个在另一个里面。
这是一个带有水平边距的示例。
<div class="margin-auto">
<div class="min-margin">
<p>Lorem Ipsum etc</p>
</div>
</div>
至于css：
.margin-auto {
margin: 0 auto;
}
.min-margin {
margin: 0 16px;
max-width: 300px;
}
【讨论】：
我在寻找一种方法来为响应式设计设置最大边距时遇到了这个问题。对于宽度不超过 48 像素的移动/平板设备，我需要 5% 的边距。 Berd 通过媒体查询给了我答案。
我的回答： 48 * 2 = 96 总最大保证金 96 是总宽度的 10%。 10 * 96 = (960) 100% of vw 其中 48px 是我第一次希望它覆盖 % 。
所以我控制边距的媒体查询变成：
@media (max-width: 959px) {
.content {
margin: 30px 5% 48px;
}
}
@media (min-width: 960px) {
.content {
display:block;
margin: 30px 48px 48px;
}
}
【讨论】：
var w = window.innerWidth;
var h = window.innerHeight;
if(w < 1116)
document.getElementById("profile").style.margin = "25px 0px 0px 975px";
else
document.getElementById("profile").style.margin = "25px 0px 0px 89%";
以上面的代码为例说明如何设置min-margin和padding
【讨论】：
理想情况下，CSS 容器中的边距应该折叠，因此您可以定义一个父容器，将其边距设置为您想要的最小值，然后为子容器使用您想要的边距，以及子级将使用父级和子级边距之间较大的边距：
如果子边距小于父边距+其填充，则子边距将无效。
如果子外边距大于父外边距+其内边距，则应增加父内边距以适应。
这仍然经常无法在 CSS 中按预期工作：当前 CSS 允许子级的边距折叠到父级的边距中（如果需要，可以扩展它们），只有在父级定义没有填充和没有边框和没有中间兄弟内容存在在孩子和父母的内容框的开始之间的父母;但是可能存在 浮动或定位 兄弟元素，它们在计算边距时会被忽略，除非它们使用“clear:”来扩展父级的内容框并在其中垂直地完全适合自己的内容（仅内容框的父级高度在其内容框的从上到下或从下到上块方向增加，或者对于从左到右或从右到左块仅增加父级宽度-direction；父内容框的内联方向不起作用）。
因此，如果父级仅定义 1px 的填充或仅 1px 的边框，则这会阻止子级将其边距折叠到父级的边距中。相反，子边距将从父级的内容框（或中间兄弟内容的边框框，如果有的话）生效。这意味着父级中的任何非空边框或非空填充都会被子级视为同一父级中的同级内容。
所以这个简单的解决方案应该可行：使用没有任何边框或填充的附加父级来设置最小边距以将子元素嵌套在其中；您仍然可以为子级添加边框或填充（如果需要），您将在其中定义自己的辅助边距（折叠到父级边距）！
请注意，子元素可能会将其边距折叠为多个父级！这意味着您可以定义多个最小值（例如，对于 3 个值之间的最小值，使用两个父级容纳孩子）。
有时需要 3 个或更多值来说明：视口宽度、文档宽度、部分容器宽度、是否存在占用容器空间的外部浮动以及子内容本身所需的最小宽度.所有这些宽度可能是可变的，也可能取决于所使用的浏览器类型（包括其可访问性设置，例如文本缩放或渲染器中的“Hi-DPI”大小调整，具体取决于目标查看设备的功能，或者有时因为有一个用户可调的布局选择，例如个人“皮肤”或其他用户的偏好，或者最终渲染主机上的可用字体集，这意味着很难安全地预测确切的字体大小，以匹配“像素”用于图像或边框；此外，如果打印和方向，用户有各种各样的屏幕尺寸或纸张尺寸；滚动甚至也不可用或无法补偿，并且通常不希望截断溢出的内容；以及使用过多的“清除”会浪费空间并使呈现的文档更难访问）。
我们需要节省空间，不包含太多信息并保持对读者的清晰度，以及易于导航：布局是一个不断的权衡，在节省空间和一次显示更多信息以避免额外滚动或导航到其他页面之间，并保持显示的打包信息易于导航或交互）。
但是 HTML 通常对于所有目标都不够灵活，即使它提供了一些高级功能，它们也变得难以创作或维护/更改文档（或它们包含的信息），或者稍后重新调整内容以用于其他目标目标或演示文稿。保持简单可以避免这个问题，如果我们使用这些几乎没有成本且易于理解的简单技巧，我们应该使用它们（这总是会节省大量宝贵的时间，包括网页设计师）。
【讨论】：
聚会迟到，如上所述，不幸的是没有最大保证金之类的东西。一个对我有帮助的解决方案是在您想要应用最大边距的项目上方放置一个 div。
<body style="width:90vw; height:90vh;">
<div name="parrentdiv/body" style="width:300px; height:100%; background-color: blue">
<div name="margin top" style="width:300px; height:50%; min-height:200px; background-color: red"></div>
<div name="item" style="width:300px; height:180px; background-color: lightgrey">Hello World!</div>
</div>
</body>
在整个页面中运行以上编码的 sn-p 并调整窗口大小以查看此操作。 lightgreypart 的 margin-top 为 50%，“min-margin-top”为 200px。这个边距是红色的 div（你可以用 display: none 隐藏；如果你想的话）。蓝色部分是身体的剩余部分。
我希望这能帮助以后遇到同样问题的人。
【讨论】：
@vigilante_stark 的回答对我有用。它可用于设置以像素为单位的最小“大约”固定边距。但是在响应式布局中，当页面宽度增加时，边距也可以根据给定的百分比增加一个百分比。 我是这样使用的
example-class{
margin: 0 calc(20px + 5%) 0 0;
}
【讨论】：
这似乎对我有用，可以制作一个嵌入了最大高度集的响应式 iframe。
.embed-container {
position: relative;
padding-bottom: min(80vh, 100%);
width: 100%;
height: 100%;
max-height: 80vh;
overflow: hidden;
max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-height: 80vh;
}
<div class="embed-container">
<iframe
src="https://player.vimeo.com/video/405184815?title=0&byline=0&portrait=0"
frameborder="0"
webkitAllowFullScreen
mozallowfullscreen
allowfullscreen
></iframe>
【讨论】：
我正在寻找一种解决方案，使行内容的行为类似于在固定宽度容器中的行为，但是随着浏览器宽度的缩小，从左侧产生最小的边距（在我的情况下：这样行内容就不会隐藏在左上角带有position: absolute 的大徽标）。
这对我有用：
HTML
<div class="parent-container">
<div class="child-container">
<h1>Some header</h1>
</div>
</div>
CSS
.parent-container {
padding-left: min(150px);
}
.child-container {
padding-left: calc( 50vw - 500px );
}
当我左右缩放浏览器窗口时，我的h1 不会比150px 向左移动更多，而是在我的下一行内容设置为显示在固定容器中的行为之后向右移动。
【讨论】：
查看我创建的这个 CodePen https://codepen.io/ella301/pen/vYLNmVg。我使用了 3 个 CSS 函数 min、max 和 calc 来确保左右填充在最小 20 像素和最大 120 像素之间流动。
padding: 20px max(min(120px, calc((100% - 1198px) / 2)), 20px);
希望对您有所帮助！
【讨论】：
我为此编写了一个库，您可以在这里查看：https://codepen.io/nicetransition/pen/OyRwKq
在您的情况下使用：
.selector {
scale($context, $base-size, $limit-size-min, $limit-size-max, $property: padding-right);
scale($context, $base-size, $limit-size-min, $limit-size-max, $property: padding-left);
}
$context: 容器的最大宽度
$base-size: 根字体大小
$limit-size-min: 最小尺寸
$limit-size-max: 最大尺寸
.selector { 比例（1400px，16px，5px，20px，$property：padding-right）； 比例（1400px，16px，5px，20px，$property：padding-left）； }
这将缩小到 5px 和最多 20px，在 5-20 之间它是基于 vw 的动态
【讨论】：
尝试使用 css 属性 min 和 max 作为解决方法
例如：
width: min(50vw, 200px);
表示宽度将是两个值中的最小值。
width: max(50vw, 200px);
表示宽度将是两个值中较大的一个。
更多细节在这里：
【讨论】：
我使用这个技巧来定义所需的最小边距，然后自动 示例：
margin-left: 20px+auto;
margin-right: 20px+auto;
这会产生最小的缓冲区域并自动对齐视图
【讨论】：