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

我们能用 CSS 定义 min-margin和 max-margin、 max-padding和 min-padding吗？

194895 次浏览
小开

更新日期2020

通过使用新的(编辑草案中的) CSS 4属性，您可以通过使用 min()和 max()来实现这一点(也可以使用 clamp()作为 min()和 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

而且正如@侠客 _ 斯塔克在 答案中指出的那样，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>

小开

margin和 padding没有最小或最大前缀。有时您可以尝试以百分比的形式指定边距和填充，以使其与屏幕大小相关。

此外，您还可以使用最小宽度、最大宽度、最小高度和最大高度来做类似的事情。

希望能有帮助。

小开

很不幸，你不能。
我尝试在 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;
}

不幸的是，这似乎是最好的方式来模仿“最大填充”和“最小填充”。我想“最小边距”和“最大边距”的技术应该差不多。希望这会在某个时候被添加进来！

小开

我今天也遇到了同样的问题，显然解决方法和使用一样简单:

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

请注意，您必须稍微减少所需的% 年龄，以解决固定像素的问题。

小开

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

我能够修复这一点，通过取代中心方法，我使用的“边距: 自动”的方式中心的盒子在其容器。在我的例子中，这可以防止盒子溢出，保持所有内容可用。(最小保证金似乎为0)。

祝你好运！

如果父元素的 display 属性设置为“ 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 通常不够灵活，不能满足所有目标，即使它提供了一些高级特性，也很难编写或维护/更改文档(或其中包含的信息) ，或在以后为其他目标或演示文稿重新调整内容。保持事情简单避免这个问题，如果我们使用这些简单的技巧，几乎没有成本和容易理解，我们应该使用它们(这将总是节省大量宝贵的时间，包括网页设计师)。

小开

你也可以使用@media 查询来建立你的最大/最小填充/边距(但只能根据屏幕大小) :

假设你想要一个最大8像素的填充，你可以这样做

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

来晚了，正如上面所说，不幸的是，没有最大利润这回事。帮助我的一个解决方案是在您想要应用最大边距的项上方放置一个 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>

在整个页面中运行上面的代码片段并调整窗口大小以查看其工作情况。浅灰色部分的边距上限为50% ，“最小边距上限”为200px。这个边距是红色的 div (可以使用 display: none 隐藏它; 如果需要的话)。尸体的蓝色部分。

我希望这将帮助人们在未来同样的问题。

小开

@ 治安维持者 _ 斯塔克的回答对我很有效。它可以用来设置以像素为单位的最小“近似”固定边距。但是在响应式布局中，当页面的宽度增加时，页边距也可以根据给定的百分比增加一个百分比。 我是这么说的

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% 的利润率。Berd 通过媒体查询给了我答案。

我的回答是: 48 * 2 = 最大余量总数96 96是总宽度的10% 。 10 * 96 = (960)100% 的 vw，其中48px 是第一次我希望它覆盖% 。

因此，我控制利润率的媒体查询变成了:

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

我正在寻找一种解决方案，使行的内容表现得像固定宽度的容器一样，但随着浏览器宽度的缩小，从左侧的边距最小(在我的例子中: 这样行的内容就不会隐藏在一个左上角有 position: absolute的大徽标下面)。

这就是对我有效的方法:

超文本标示语言

<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: 容器的最大宽度

  • 根字体大小

  • 最小尺寸

  • 最大尺寸

    选择器{ 比例(1400px，16px，5 px，20px，$property: pding-right) ; 比例(1400px，16px，5 px，20px，$property: pding-left) ; }

这将缩小到5像素和高达20像素，在5-20之间，它是动态的基于大众

小开

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

例如:

width: min(50vw, 200px);

意味着宽度将是这两个值中的最小值。

width: max(50vw, 200px);

意味着宽度将是这两个值中较大的一个。

更多详情请浏览此网页:

Https://developer.mozilla.org/en-us/docs/web/css/min

小开

我使用这个黑客定义的最低边际要求然后自动 例如:

左边距: 20px + 自动;

右边距: 20px + 自动;

这使得一个最小的缓冲区域，并自动调整视图

小开
最佳答案

你可以的！

或者如果不是这些术语，那么至少是次好的事情。到了2020年，使用 CSS 数学函数 最少()、 Max ()和 夹钳()就变得非常简单了。

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

下面是 caniuse 的浏览器支持列表 。覆盖率总体上是非常好的，包括几乎所有的现代浏览器-除了一些次要的移动浏览器，虽然我自己还没有测试过。


提交答案