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

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

是的你可以！

或者，如果这些术语不完全相同，那么至少是下一件好事。在2020年，现在使用CSS数学函数非常简单：min（），max（）和钳位（）。

甲min计算拾取从逗号最小分隔（任何长度）值的列表。这可以用来定义最大填充或最大边距规则：

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

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

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

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

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

MDN指定钳位实际上只是以下各项的简写：

max(MINIMUM, min(PREFERRED, MAXIMUM))

这是clamp用于25vw在100px和之间包含边距的方法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链接中查看用例的完整列表。

这是浏览器支持的列表。覆盖范围通常非常好，包括几乎所有现代浏览器-看起来似乎有些例外，尽管一些二手移动浏览器本人并未对此进行测试。

2020年更新

随着新的（但在编者草案）CSS 4个属性，你可以通过实现这个min()和max()（你也可以使用clamp()作为-种-速记两个min()和max()

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在答案中指出的那样，该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*%) 

请注意，您必须将所需的百分比降低一些，以解决固定像素问题。

不幸的是你不能。
我尝试使用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中，并使用max width和width这样

 .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）。

祝好运 ！

编辑：边距：如果父元素的显示属性设置为“ flex”，则auto仅在使某些内容垂直居中时起作用。

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仅允许父级定义NO填充和NO边框，并且允许子级的边距折叠到父级的边距中（必要时将其扩展）。子级与父级内容框的开头之间的父级中不存在中间同级内容；但是可能会漂浮或定位兄弟元素，在计算边距时将被忽略，除非它们使用“ clear：”也扩展了父级的内容框并完全将其自身的内容垂直地放置在其中（只有父级的内容框的高度增加了，内容框的自下而上或自上而下的块方向，或仅父级的宽度为从左至右或从右至左的块方向；父级的内容框的内联方向播放无作用）。

因此，如果父级仅定义1px的填充或边框的1px，则这将阻止子级将其边距折叠为父级的边距。相反，子页边距将从父级的内容框（或中间同级内容的边框，如果有）生效。这意味着，子级将父级中的任何非空边框或非空填充都视为该父级中的同级内容。

因此，这种简单的解决方案应该起作用：使用没有任何边框或填充的附加父元素来设置将子元素嵌套在其中的最小边距；您仍然可以在子级上添加边框或填充（如果需要），在其中定义其自己的辅助边距（合并到父级边距）！

请注意，子元素可能会将其边距折叠为多个级别的父元素！这意味着您可以定义多个最小值（例如，对于3个值之间的最小值，请使用两个级别的父级来包含子级）。

有时需要考虑3个或更多的值：视口宽度，文档宽度，节容器宽度，容器中是否存在外部浮标窃取空间以及子内容本身所需的最小宽度。所有这些宽度可能是可变的，并且可能还取决于所使用的浏览器的类型（包括其可访问性设置，例如文本缩放或渲染器中大小的“ Hi-DPI”调整，具体取决于目标查看设备的功能，有时因为可以根据用户需要选择布局，例如个人“皮肤”或其他用户的偏好设置，或者最终渲染主机上的可用字体集，这意味着要安全地预测确切的字体大小，以匹配“像素”（用于图像或边框）；以及用户在打印和方向方面具有多种屏幕尺寸或纸张尺寸；滚动甚至也不可用或不可能进行补偿，并且溢出内容的截断通常是不希望的；以及使用过多的“清除”会浪费空间，并使呈现的文档难以访问。

我们需要节省空间，而又不增加太多信息并保持读者阅读的清晰度和导航的便利性：在减少空间和一次显示更多信息之间进行权衡是一种不变的选择，以避免额外的滚动或导航到其他页面，并保持显示的打包信息易于浏览或与之交互）。

但是，HTML常常不足以实现所有目标的灵活性，即使HTML提供了一些高级功能，它们也难以编写或维护/更改文档（或它们包含的信息），或以后为其他目标或演示文稿重新调整内容的难度。 。使事情保持简单可以避免此问题，如果我们使用这些几乎没有成本并且易于理解的简单技巧，则应该使用它们（这将总是节省很多宝贵的时间，包括对于Web设计人员而言）。

不幸的是，如上所说，迟到了聚会，就没有最大保证金了。一种对我有帮助的解决方案是在要应用最大利润率的项目上方放置一个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>

在整页上面的代码段中运行，并调整窗口大小以查看此工作。lightgreypart的边距顶部为50％，“最小边距顶部”为200px。此边距是红色div（如果可以隐藏，则可以通过显示进行隐藏：无；如果需要）。蓝色部分是身体的剩余部分。

我希望这将对将来有同样问题的人们有所帮助。

@vigilante_stark的答案对我有用。它可用于以像素为单位设置最小的“近似”固定边距。但是在响应式布局中，当页面的宽度增加时，页边距也可以根据给定的百分比增加一个百分比。我用它如下

example-class{
  margin: 0 calc(20px + 5%) 0 0;
}

晚会晚了，但我想分享我的简单解决方案。我要假设，如果我们想要某种可以像最小边距一样工作的东西，那是因为我们首先拥有一个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;
}

这似乎对我有用，以使响应式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>

我遇到了这个问题，寻找一种为响应式设计做最大利润的方法。对于宽度不超过48像素的移动/平板电脑，我需要5％的保证金。伯德通过媒体查询给了我答案。

我的答案：48 * 2 = 96总的最大边距96是总宽度的10％。10 * 96 =（960）vw的100％，其中48px是我第一次希望它覆盖％。

因此，我控制媒体利润的媒体查询变为：

@media (max-width: 959px) {
    .content {
        margin: 30px 5% 48px;
    }
}
@media (min-width: 960px) {
    .content {
        display:block;
        margin: 30px 48px 48px;
    }
}

我一直在寻找一种解决方案，以使行的内容像在固定宽度的容器中一样，但是随着浏览器宽度的缩小，左侧的边距要最小（在我的情况下：这样行内容就不会隐藏在大徽标下与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来确保左右填充在最小20px和最大120px之间是可变的。

 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 {scale（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);

表示宽度将是两个值中的较大者。

此处有更多详细信息：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/min

我使用此技巧来定义所需的最小保证金，然后使用自动示例：

左边距：20px + auto;

右边距：20px + auto;

这样可以使垫子面积最小，并自动对齐视图