CSS3-我们可以在CSS中定义最小边距和最大边距,最大填充和最小填充吗?

我们是否可以在CSS中定义min-marginmax-marginmax-paddingmin-padding

omkar asked 2020-08-03T09:02:31Z
10个解决方案
29 votes

不,你不能。

<section> <div class="min"></div> <div class="max"></div> </section><section> <div class="min"></div> <div class="max"></div> </section>属性没有<section> <div class="min"></div> <div class="max"></div> </section>/vw前缀

一种近似的方法是使用相对单位(<section> <div class="min"></div> <div class="max"></div> </section>/vw),但仍不使用min/max

正如@vigilante_stark在答案中指出的那样,<section> <div class="min"></div> <div class="max"></div> </section>函数可能是另一个解决方法,如下所示:

<section>
  <div class="min"></div>
  <div class="max"></div>
</section>
<section>
  <div class="min"></div>
  <div class="max"></div>
</section>

dippas answered 2020-08-03T09:02:55Z
8 votes

今天我也面临着同样的问题。 显然,解决方案就像使用以下命令一样简单:

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

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

vigilante_stark answered 2020-08-03T09:03:20Z
3 votes

marginpadding没有最小或最大前缀。 有时,您可以尝试按百分比指定边距和填充,以使其相对于屏幕尺寸可变。

此外,您还可以使用min-width,max-width,min-height和max-height来执行类似的操作。

希望能帮助到你。

Amaan Iqbal answered 2020-08-03T09:03:48Z
3 votes

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

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

不幸的是,这似乎是模仿“最大填充”和“最小填充”的最佳方法。 我想该技术对于“最小边距”和“最大边距”将是相似的。 希望这会在某个时候添加!

Kimeiga answered 2020-08-03T09:04:26Z
2 votes

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

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

祝好运 !

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

Kasper Gyselinck answered 2020-08-03T09:05:01Z
2 votes

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

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

div {
  padding: 1vh 0;
}
@media (max-height: 800px) {
  div {
    padding: 8px 0;
  }
}
Berd answered 2020-08-03T09:05:25Z
0 votes
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-marginpadding的示例

suraj kumar answered 2020-08-03T09:05:45Z
-1 votes

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

Manu Padmanabhan answered 2020-08-03T09:06:14Z
-1 votes

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

  • 如果子级边距小于父级边距+填充,则子级边距将无效。

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

这仍然经常无法按CSS的预期工作:当前CSS仅允许父级定义NO填充和NO边框,并且仅允许父级的边距折叠到父级的边距(必要时扩展)。 子级与父级内容框的开头之间的父级中不存在中间同级内容; 但是,可能会有浮动或定位的同级元素,在计算边距时会被忽略,除非它们使用“ clear:”来扩展父级的内容框并完全将其自身的内容垂直地放入其中(仅父级的内容高度为- 框增加了其内容框的从上到下或从下到上的块方向,或者仅增加了父块的宽度,从左到右或从右到左的块方向;内联方向 父母的content-box中的任何元素都不起作用)。

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

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

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

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

我们需要节省空间,而又不打包太多信息并保持读者的清晰度,并且易于导航:布局是一种持续的折衷方案,既要节省空间又要立即显示更多信息,以避免额外的滚动或导航到其他页面,并保持 显示的打包信息易于浏览或与之交互)。

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

verdy_p answered 2020-08-03T09:07:19Z
-1 votes

如上所说,晚到了晚会,不幸的是,没有最大保证金这样的事情。 一个对我有帮助的解决方案是在要应用最大利润率的项目上方放置一个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(如果可以隐藏,则可以使用显示进行隐藏:无;如果需要)。 蓝色部分是身体的剩余部分。

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

Jorian Koning answered 2020-08-03T09:07:51Z
translate from https://stackoverflow.com:/questions/38078957/can-we-define-min-margin-and-max-margin-max-padding-and-min-padding-in-css