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

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

提问by omkar

Can we define min-marginand max-margin, max-paddingand min-paddingin CSS ?

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

回答by dippas

No you can't.

不，你不能。

marginand paddingproperties don't have the min/maxprefixes

margin和padding属性没有min/max前缀

An approximately way would be using relative units (vh/vw), but still not min/max

一种近似的方法是使用相对单位（vh/ vw），但仍然不是min/max

And as @vigilante_stark pointed out in the answer, the CSS calc()function could be another workaround, something like these:

正如@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>

回答by vigilante_stark

I was faced with the same problem today. Apparently the solution is as simple as using :

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

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

Note that you do have to decrement the required %age a little to account for fixed pixels.

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

回答by Kimeiga

Unfortunately you cannot.
I tried using the CSS maxfunction in paddingto attempt this functionality, but I got a parse error in my css. Below is what I tried:

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

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

I then tried to separate the operations into variables, and that didn't work either

然后我尝试将操作分成变量，但这也不起作用

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

What eventually worked was just nesting what I wanted padded in a div with class "centered" and using max width and width like so

最终起作用的只是将我想要填充的内容嵌套在具有“居中”类的 div 中，并像这样使用最大宽度和宽度

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

Unfortunately, this appears to be the best way to mimic a "max-padding" and "min-padding". I imagine the technique would be similar for "min-margin" and "max-margin". Hopefully this gets added at some point!

不幸的是，这似乎是模仿“最大填充”和“最小填充”的最佳方式。我想“最小边距”和“最大边距”的技术是相似的。希望这会在某个时候添加！

回答by Amaan Iqbal

marginand paddingdon't have min or max prefixes. Sometimes you can try to specify margin and padding in terms of percentage to make it variable with respect to screen size.

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

Further you can also use min-width, max-width, min-height and max-height for doing the similar things.

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

Hope it helps.

希望能帮助到你。

回答by Berd

You can also use @media queries to establish your max/min padding/margin (but only according to screen size):

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

Let's say you want a max padding of 8px, you can do the following

假设您想要 8px 的最大填充，您可以执行以下操作

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

回答by Kasper Gyselinck

I think I just ran into a similar issue where I was trying to center a login box (like the gmail login box). When resizing the window, the center box would overflow out of the browser window (top) as soon as the browser window became smaller than the box. Because of this, in a small window, even when scrolling up, the top content was lost.

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

I was able to fix this by replacing the centering method I used by the "margin: auto" way of centering the box in its container. This prevents the box from overflowing in my case, keeping all content available. (minimum margin seems to be 0).

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

Good Luck !

祝你好运 ！

edit: margin: auto only works to vertically center something if the parent element has its display property set to "flex".

编辑：边距：如果父元素的显示属性设置为“flex”，则自动仅适用于垂直居中。

回答by suraj kumar

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%";

Use code above as an example of how to set min-marginand padding

使用上面的代码作为如何设置min-margin和的示例padding

回答by verdy_p

Ideally, margins in CSS containers should collapse, so you can define a parent container which sets its margins(s) to the minimum you want, and then use the margin(s) you want for the child, and the content of the child will use the larger margins between the parent and child margin:

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

• if the child margin(s) are smaller than the parent margin(s)+its padding(s), then the child margins(s) will have no effect.

• if the child margin(s) are larger than the parent margin(s)+its padding(s), then the parent padding(s) should be increased to fit.

• 如果子边距小于父边距+它的填充，则子边距将不起作用。

• 如果子边距大于父边距+其填充，则应增加父填充以适应。

This is still frequently not working as intended in CSS: currently CSS allows margin(s) of a child to collapse into the margin(s) of the parent (extending them if necesary), only if the parent defines NO padding and NO borderand no intermediate sibling content existin the parent between the child and the begining of the content box of the parent; however there may be floatting or positionedsibling elements, which are ignored for computing margins, unless they use "clear:" to also extend the parent's content-box and compltely fit their own content vertically in it (only the parent's height of the content-box is increased for the top-to-bottom or bottom-to-top block-direction of its content box, or only the parent's width for the left-to-right or right-to-left block-direction; the inline-direction of the parent's content-box plays no role) .

这在 CSS 中仍然经常不按预期工作：目前 CSS 允许子级的边距折叠到父级的边距中（如果需要，扩展它们），只有当父级定义没有填充和没有边框并且父级中子级和父级内容框的开头之间不存在中间同级内容；但是可能有浮动或定位兄弟元素，在计算边距时会被忽略，除非它们使用“clear:”来扩展父级的内容框并完全垂直地将它们自己的内容垂直放入其中（只有父级的内容框的高度增加了顶部-其内容框的自下而上或自下而上的块方向，或从左到右或从右到左的块方向仅父级的宽度；父级内容框的内联方向播放没有作用）。

So if the parent defines only 1px of padding, or only 1px of border, then this stops the child from collapsing its margin into the parent's margin. Instead the child margins will take effect from the content box of the parent (or the border box of the intermediate sibling content if there's any one). This means that any non-null border or non-null padding in the parent is treated by the child as if this was a sibling content in the same parent.

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

So this simple solution should work: use an additional parent without any border or padding to set the minimum marginto nest the child element in it; you can still add borders or paddings to the child (if needed) where you'll defining its own secondary margin (collapsing into the parent(s) margins) !

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

Note that a child element may collapse its margin(s) into several levels of parents !This means that you can define several minimums (e.g. for the minimum between 3 values, use two levels of parents to contain the child).

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

Sometimes 3 or more values are needed to account for: the viewport width, the document width, the section container width, the presence or absence of external floats stealing space in the container, and the minimum width needed for the child content itself. All these widths may be variable and may depend as well on the kind of browser used (including its accessibility settings, such as text zoom, or "Hi-DPI" adjustments of sizes in renderers depending on capabilities of the target viewing device, or sometimes because there's a user-tunable choice of layouts such as personal "skins" or other user's preferences, or the set of available fonts on the final rendering host, which means that exact font sizes are hard to predict safely, to match exact sizes in "pixels" for images or borders ; as well users have a wide variety of screen sizes or paper sizes if printing, and orientations ; scrolling is also not even available or possible to compensate, and truncation of overflowing contents is most often undesirable; as well using excessive "clears" is wasting space and makes the rendered document much less accessible).

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

We need to save space, without packing too much info and keeping clarity fore readers, and ease of navigation : a layout is a constant tradeoff, between saving space and showing more information at once to avoid additional scrolling or navigation to other pages, and keeping the packed info displayed easy to navigate or interact with).

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

But HTML is often not enough flexible for all goals, and even if it offers some advanced features, they becomes difficult to author or to maintain/change the documents (or the infos they contain), or readapt the content later for other goals or presentations. Keeping things simple avoids this issue and if we use these simple tricks that have nearly no cost and are easy to understand, we should use them (this will always save lot of precious time, including for web designers).

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

回答by Jorian Koning

Comming late to the party, as said above there unfortunately is no such thing as max-margin. A sollution that helped me is to place a div above the item you want to have the max-margin applied to.

聚会迟到，如上所述，不幸的是没有最大利润这样的东西。一个帮助我的解决方案是在您想要应用最大边距的项目上方放置一个 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>

Run above coded snippet in full page and resize the window to see this working. The lightgreypart will have the margin-top of 50% and a 'min-margin-top' of 200px. This margin is the red div (wich you can hide with display: none; if you want to). The blue part is what's left of the body.

在整页中运行上面的代码片段并调整窗口大小以查看它的工作情况。lightgreypart 的 margin-top 为 50%，'min-margin-top' 为 200px。此边距是红色 div（您可以使用 display: none 隐藏；如果您愿意）。蓝色部分是身体的剩余部分。

I hope this will help people with the same problem in the future.

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

回答by Da Beginer

@vigilante_stark's answer worked for me. It can be used to set a minimum "approximately" fixed margin in pixels. But in a responsive layout, when the width of the page is increasing margin can be increased by a percentage according to the given percentage as well. I used it as follows

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

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