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

问题描述 投票:37回答:10

我们可以在CSS中定义min-marginmax-marginmax-paddingmin-padding吗?

css css3 margin padding
10个回答
27
投票

不,你不能。

marginpadding属性没有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>

-1
投票

迟到了,如上所述,遗憾的是没有最大边际。一个帮助我的解决方案是在你希望应用最大边距的项目上方放置一个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(你可以隐藏display:none;如果你愿意的话)。蓝色部分是身体的左侧。

我希望这将有助于将来遇到同样问题的人们。


7
投票

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

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

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


3
投票

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

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

希望能帮助到你。


3
投票

不幸的是你不能。 我尝试在max中使用CSS padding函数来尝试此功能,但我的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;
}

不幸的是,这似乎是模仿“max-padding”和“min-padding”的最佳方式。我想这个技术将类似于“min-margin”和“max-margin”。希望这在某些时候得到补充!


2
投票

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

我能够通过替换我使用的居中方法来解决这个问题,方法是将盒子置于其容器中心的“margin:auto”方式。这可以防止盒子溢出我的情况,保持所有内容可用。 (最小保证金似乎是0)。

祝好运 !

编辑:margin:auto仅在父元素的display属性设置为“flex”时才垂直居中。


1
投票

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

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

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

0
投票
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的示例


-1
投票

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


-1
投票

理想情况下,CSS容器中的边距应该会崩溃,因此您可以定义一个父容器,将其边距设置为您想要的最小边距,然后使用您想要的子边距,并且子内容将会使用父边距和子边距之间的较大边距:

  • 如果子边距小于父边距+其填充,那么子边距将不起作用。
  • 如果子边距大于父边距+其填充(s),则应增加父填充以适合。

这仍然经常在CSS中无法正常工作:目前CSS允许子级的边距折叠到父级的边距(如果需要的话,可以扩展它们),只有在父级定义无填充且没有边界且在子节点和父节点内容框的开头之间,父节点中不存在中间兄弟内容;然而,可能存在浮动或定位的兄弟元素,这些元素在计算边距时被忽略,除非他们使用“clear:”来扩展父母的内容框并且在其中垂直地完全适合他们自己的内容(仅限父母的内容高度 - 对于其内容框的从上到下或从下到上的块方向增加框,或者从左到右或从右到左的块方向仅增加父的宽度;内联方向父母的内容框没有任何作用)。

因此,如果父级只定义了1px的填充,或者只定义了1px的边框,那么这会阻止子级将其边距折叠到父级的边距中。相反,子边距将从父节点的内容框(或中间兄弟内容的边框框,如果有的话)生效。这意味着父级将处理父级中的任何非空边框或非空填充,就好像这是同一父级中的兄弟内容一样。

所以这个简单的解决方案应该可行:使用没有任何边框或填充的附加父级来设置将子元素嵌套在其中的最小边距;您仍然可以为孩子添加边框或填充(如果需要),您可以在其中定义自己的辅助边距(折叠到父级边距)!

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

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

我们需要节省空间,无需打包太多信息并保持读者的清晰度,并且易于导航:布局是一个恒定的权衡,在节省空间和一次显示更多信息之间以避免额外滚动或导航到其他页面,并保持打包的信息显示易于导航或与之交互)。

但是HTML通常不足以灵活地实现所有目标,即使它提供了一些高级功能,也很难创作或维护/更改文档(或它们包含的信息),或者稍后重新阅读内容以用于其他目标或演示文稿。保持简单可以避免这个问题,如果我们使用几乎没有成本且易于理解的简单技巧,我们应该使用它们(这将节省大量宝贵的时间,包括网页设计师)。

© www.soinside.com 2019 - 2024. All rights reserved.