我们可以在 css 中定义 min-margin 和 max-margin，max-padding 和 min-padding 吗？

Question

我们可以在 CSS 中定义 min-margin 和 max-margin、max-padding 和 min-padding 吗？

Answer 1

2020 年更新

有了新的（仍在编辑草案中）CSS 4 个属性，您可以通过使用 min() and max() (also you can use clamp() 作为一种 - shorthand 来实现此目的 min()和 max()

clamp(MIN, VAL, MAX) is resolved as 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 and 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 2

margin 和 padding 没有最小或最大前缀。有时您可以尝试以百分比形式指定边距和填充，以使其根据屏幕尺寸变化。

此外，您还可以使用 min-width、max-width、min-height 和 max-height 来做类似的事情。

希望对您有所帮助。

Answer 3

很遗憾，你不能。
我尝试使用 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 和 class "centered" 中，并像这样使用最大宽度和宽度

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

不幸的是，这似乎是模仿 "max-padding" 和 "min-padding" 的最佳方式。我想 "min-margin" 和 "max-margin" 的技术是相似的。希望这会在某个时候被添加！

Answer 4

我今天遇到了同样的问题。显然，解决方案就像使用一样简单：

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

请注意，您必须稍微减少所需的 %age 以考虑固定像素。

Answer 5

我想我只是运行遇到了一个类似的问题，我试图将登录框（如 gmail 登录框）居中。当调整 window 大小时，一旦浏览器 window 变得小于框，中心框就会溢出浏览器 window（顶部）。正因为如此，在一个小小的window中，即使向上滚动，顶部的内容也丢失了。

我能够通过将我使用的居中方法替换为 "margin: auto" 将盒子在其容器中居中的方法来解决这个问题。这可以防止盒子在我的情况下溢出，从而保持所有内容可用。（最低保证金似乎为 0）。

祝你好运！

edit: margin: auto 仅在父元素的显示属性设置为 "flex".

时才能垂直居中

Answer 6

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

Answer 7

理想情况下，CSS 容器中的边距应该折叠，因此您可以定义一个 parent 容器，将其边距设置为您想要的最小值，然后使用边距您想要 child，child 的内容将使用 parent 和 child 之间的较大边距：

如果 child 边距小于 parent 边距+其填充，则 child 边距（ s) 将无效。
如果child边距大于parent边距+其填充，则parent填充（ s) 应该增加以适应。

这在 CSS 中仍然经常无法正常工作：目前 CSS 允许 child 的边距折叠到 [= 的边距中85=]（必要时扩展它们），仅当 parent 定义无填充和无边框 且 不存在中间同级内容时 在 child 和 parent 的内容框开头之间的 parent；然而，可能有 浮动或定位 兄弟元素，它们在计算边距时会被忽略，除非它们使用 "clear:" 来扩展 parent 的 content-box 并在其中完全适合自己的内容（只有 content-box 的 parent 的高度增加了 top-to-bottom 或 bottom-to-top block-direction内容框，或者只有 parent 的宽度为 left-to-right 或 right-to-left block-direction；inline-direction 为 parent 的 content-box 没有作用）.

因此，如果 parent 仅定义 1px 的填充，或仅定义 1px 的边框，那么这将阻止 child 将其边距折叠到 parent 的边距中。相反，child 边距将从 parent 的内容框（或中间兄弟内容的边框框，如果有的话）生效。这意味着 parent 中的任何 non-null 边框或 non-null 填充都被 child 视为同一个 parent 中的同级内容。 =10=]

所以这个简单的解决方案应该可行：使用一个没有任何边框或填充的附加 parent 来设置最小边距 以将 child 元素嵌套在它;您仍然可以向 child 添加边框或填充（如果需要），您将在其中定义自己的辅助边距（折叠到 parent(s) 边距）！

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

有时需要 3 个或更多值来说明：视口宽度、文档宽度、部分容器宽度、容器中是否存在外部浮动窃取 space 以及最小宽度child 内容本身需要。所有这些宽度都可能是可变的，也可能取决于所使用的浏览器类型（包括其可访问性设置，例如文本缩放，或 "Hi-DPI" 根据目标查看设备的功能调整渲染器中的大小，或者有时因为有 user-tunable 布局选择，例如个人 "skins" 或其他用户的偏好，或最终呈现主机上的可用字体集，这意味着很难安全地预测准确的字体大小，以匹配"pixels" 中图像或边框的确切尺寸；以及用户有各种各样的屏幕尺寸或纸张尺寸（如果打印）和方向；滚动甚至不可用或不可能进行补偿，溢出内容的截断是最重要的通常是不受欢迎的；使用过多的 "clears" 也是在浪费 space 并使呈现的文档更难访问）。

我们需要保存 space，但不要打包太多信息并保持读者的清晰度和易于导航：布局是在保存 space 和显示更多信息之间不断权衡的一次以避免额外的滚动或导航到其他页面，并保持显示的打包信息易于导航或交互）。

但是 HTML 对于所有目标来说通常不够灵活，即使它提供了一些高级功能，它们也变得难以创作或 maintain/change 文档（或它们包含的信息），或稍后为其他目标或演示重新调整内容。保持简单可以避免这个问题，如果我们使用这些几乎没有成本且易于理解的简单技巧，我们应该使用它们（这总是会节省很多宝贵的时间，包括网页设计师）。

Answer 8

您还可以使用@media 查询来建立您的max/min padding/margin（但只能根据屏幕尺寸）：

假设您想要 8px 的最大内边距，您可以执行以下操作

div {
  padding: 1vh 0;
}
@media (max-height: 800px) {
  div {
    padding: 8px 0;
  }
}

Answer 9

聚会迟到了，如上所述，不幸的是没有 max-margin 这样的东西。一个对我有帮助的解决方案是在要应用 max-margin 的项目上方放置一个 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>

运行上面的代码片段在整页中并调整 window 的大小以查看此工作。 lightgreypart 将具有 50% 的 margin-top 和 200px 的 'min-margin-top'。这个边距是红色的 div （如果你愿意，你可以用 display: none; 隐藏）。蓝色部分是 body.

剩下的部分

希望这对以后遇到同样问题的人有所帮助。

Answer 10

@vigilante_stark 的回答对我有用。它可用于设置最小 "approximately" 固定边距（以像素为单位）。但是在响应式布局中，当页面宽度增加时，边距也可以根据给定的百分比增加一个百分比。我是这样使用的

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

Answer 11

聚会迟到了，但我想分享我的简单解决方案。我假设如果我们想要像最小边距一样工作的东西，那是因为我们首先有一个 margin: auto;，我们不希望那个边距 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;
}

Answer 12

这似乎对我有用，可以制作具有最大高度集的响应式 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>

Answer 13

我运行正在寻找一种方法来为响应式设计提供最大利润。对于 mobile/tablet 宽达 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;
    }
}

Answer 14

我一直在寻找一种解决方案，使行的内容表现得像在固定宽度的容器中一样，但是随着浏览器宽度的缩小，使左边的边距最小（在我的例子中：这样行内容就不会隐藏在左上角带有 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 );
}

当我向左和向右缩放浏览器 window 时，我的 h1 并没有比 150px 向左移动更多，而是按照我的下一个行为向右移动行的内容设置为显示在固定容器中。

Answer 15

查看我创建的这个 CodePen https://codepen.io/ella301/pen/vYLNmVg。我使用了 3 个 CSS 函数 min、max 和 calc 来确保左右填充在最小 20px 和最大 120px 之间流动。

 padding: 20px max(min(120px, calc((100% - 1198px) / 2)), 20px);

希望对您有所帮助！

Answer 16

我写了一个库来做这个，你可以在这里查看：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：Max-width 你的容器
$base-size: 根字体大小
$limit-size-min:最小尺寸
$limit-size-max:最大尺寸

.选择器{ 规模（1400px，16px，5px，20px，$属性：padding-right）；规模（1400px，16px，5px，20px，$属性：padding-left）； }

这将缩小到 5px 和最大 20px，在 5-20 之间它是基于 vw 的动态

Answer 17

尝试使用 css 属性最小值和最大值作为解决方法

例如：

width: min(50vw, 200px);

表示宽度将是两个值中的最小值。

width: max(50vw, 200px);

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

此处有更多详细信息：

https://developer.mozilla.org/en-US/docs/Web/CSS/min

Answer 18

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

margin-left: 20px+自动;

margin-right: 20px+自动;

这会产生最小缓冲区域并自动对齐视图

Answer 19

是的，你可以！

或者，如果不完全是那些术语，那么至少是下一个最好的事情。在 2020 年，现在使用 CSS 数学函数非常简单：min(), max(), and clamp().

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

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

A max 计算类似地从逗号分隔的值列表（任意长度）中选取最大的值。这可用于定义 min-padding 或 min-margin 规则：

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

A clamp取三个值；最小、首选和最大值，按此顺序。

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

MDN 指定 clamp 实际上只是 shorthand for:

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 - 它们不仅用于控制边距和填充。在 post.

顶部的 MDN 链接中查看完整的用例列表

Here is the caniuse list of browser support。覆盖范围通常非常好，包括几乎所有现代浏览器 - 似乎有一些二级移动浏览器除外，尽管我自己没有测试过。

我们可以在 css 中定义 min-margin 和 max-margin，max-padding 和 min-padding 吗？

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

css

margin

padding

2020 年更新

片段

旧答案