Question

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

Answer 1

不，你不能。

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>

Answer 2

是的，您可以！

或者如果这些术语不完全相同，那么至少是次佳的选择。在2020年，使用CSS数学函数min()，max()和clamp()非常简单。

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

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

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

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

clamp具有三个值；最小，首选和最大值，按此顺序。

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链接中查看用例的完整列表。

Here is the caniuse list of browser support。覆盖范围通常非常好，包括几乎所有现代浏览器-除了一些二手移动浏览器，它似乎都例外，尽管我自己并未对此进行测试。

Answer 3

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

一样简单

    $cb.on('change', function(e){
      e.preventDefault();
      $('> tbody > tr > td:first-child > input:checkbox', $bTable).prop('checked', this.checked);
    });

请注意，您必须稍微减少所需的％年龄以计算固定像素。

Answer 4

margin和padding没有最小或最大前缀。有时您可以尝试使用百分比来指定边距和填充，以使其在屏幕大小方面可变。

此外，您还可以使用最小宽度，最大宽度，最小高度和最大高度来执行类似的操作。

希望它有所帮助。

Answer 5

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

padding

然后我尝试将操作分成变量，而且这些操作都不起作用

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

最终起作用的只是将我想要填充的内容嵌入到一个div中，而＃34;居中＆＃34;并使用最大宽度和宽度，如此

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

不幸的是，这似乎是模仿＆＃34; max-padding＆＃34;的最好方法。和＆＃34; min-padding＆＃34;。我想这个技术类似于＆＃34; min-margin＆＃34;和＆＃34; max-margin＆＃34;。希望在某些时候添加它！

Answer 6

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

我可以通过将框在其容器中居中的“ margin：auto”方式代替居中方法来解决此问题。在我的情况下，这可以防止盒子溢出，使所有内容保持可用。（最小边距似乎为0）。

祝你好运！

edit：margin：只有在父元素的显示属性设置为“ flex”的情况下，auto才可以使某些内容垂直居中。

Answer 7

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 8

您还可以使用@media查询来建立最大/最小填充/边距（但仅根据屏幕尺寸）：

假设您希望最大填充为8px，则可以执行以下操作

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

Answer 9

我认为您的问题将解决使用：
1 min-width:
2 max-width:

Answer 10

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

左边距：20px +自动；

右边距：20px +自动；

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

Answer 11

尝试使用css属性的min和max作为解决方法

例如：

select person_id, month, name, max(special) from t group by person_id, month, name having sum(case when special = 'content' then 1 else 0 end) = 0;

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

FileInputStream fileStream = new FileInputStream("file.txt"); // Creates an ObjectInputStream ObjectInputStream input = new ObjectInputStream(fileStream); // Reads the objects while (fileStream.available() != 0) { Object human = (Human) input.readObject(); if (human != null) System.out.println(human); }

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

更多详细信息在这里：

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

Answer 12

我为此编写了一个库，您可以在这里查看：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动态的

Answer 13

请参阅我创建的此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 14

我遇到了这个问题，寻找一种为响应式设计做最大利润的方法。对于宽度不超过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;
    }
}

Answer 15

这似乎对我来说是使嵌入最大高度的自适应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 16

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

Answer 17

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

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

Answer 18

不幸的是，如上所说，迟到晚会是没有最大保证金的。一种对我有帮助的解决方案是在您要应用最大利润率的项目上方放置一个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（如果可以隐藏，则可以在显示时隐藏：无；如果需要）。蓝色部分是身体的剩余部分。

我希望这会在将来对遇到相同问题的人有所帮助。

Answer 19

理想情况下，CSS容器中的边距应该折叠，因此您可以定义一个父容器，将其边距设置为所需的最小值，然后将所需的边距用于子对象，以及其内容孩子将使用父母与孩子之间的较大边距：

如果子边距小于父边距加上其填充，则子边距将无效。
如果子边距大于父边距加上其填充，则应增加父边距以适合。

这仍然经常无法按CSS预期的那样工作：目前CSS允许孩子的页边空白折叠到父级的空白（如果需要，可以扩展），仅当父级定义在子级与父级内容框的开头之间，父级中没有填充和边框，和没有中间同级内容；但是，可能存在浮动或定位兄弟元素，这些元素在计算页边距时会被忽略，除非它们使用“ clear：”来扩展父级的内容框并完全将其自身的内容垂直放置在其中（仅内容框的父级的高度沿其内容框的顶部到底部或底部到顶部的块方向增加，或者仅父级的宽度从左到右或从右到左的块增加方向；父级内容框的内联方向不起作用。

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

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

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

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

我们需要节省空间，而又不增加太多信息并保持阅读器的清晰度和导航的便利性：布局是一种持续的权衡取舍，既要节省空间又要立即显示更多信息，以避免额外的滚动或导航到其他页面，并使显示的打包信息易于浏览或与之交互。

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

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

19 个答案: