在 CSS 中使用自动边距，但需要最小边距答案

【问题标题】：Using a auto margin in css but want a minimum margin在 CSS 中使用自动边距，但需要最小边距
【发布时间】：2012-11-11 16:31:51
【问题描述】：

我检查了 Using a percentage margin in CSS but want a minimum margin in pixels?。它有如何在使用百分比时实现最小边距。但我正在使用

width:80%;
margin:5px auto;

如何在左侧设置最小边距。我按照Reducing the space equally when resizing browser window使用了自动边距

谢谢

【问题讨论】：

这可能会对你有所帮助：stackoverflow.com/questions/6350645/… stackoverflow.com/questions/6513067/… :-) 祝你好运！
我认为这在术语上是矛盾的。 Auto 将占用剩余空间并将其平均分配到元素的任一侧。我建议，如果始终需要这个最小保证金，那么 Auto 是不合适的。如果有条件需要，则将不同的类应用于适当的 auto 样式元素。
@codepuppy 检查这个stackoverflow.com/questions/13526096/…
我也遇到过类似的事情。我的理解是（如上面的答案所示）您必须指定一个小于包含元素宽度的宽度（通常为 %）。如果您不这样做，则浏览器无法计算残差，并且无法正确对齐。我会将您的注意力集中在元素的包含方式和位置上，因为这对我来说是关键。我已经在我的关键笔记中添加了一个答案，这可能会有所帮助。
一般来说，最好的方法可能是使用媒体查询，如链接问题的答案stackoverflow.com/a/34957267/4050592。

标签： html css

【解决方案1】：

可能需要另一个 div 才能完成此任务。我将您所说的 div 称为#content div。我知道你的会有更多的CSS。这只是我所讨论的边距的示例。接下来，我们将#content div 放入我们将称为#container 的div 中。我们还将在此 div 中将边距设置为自动。添加的方面是我们将向#container div 添加填充（左右）。

#content {
    margin: auto;
}

#container {
    padding-right: 5px;
    padding-left: 5px;
}

我认为这将实现您的目标。请记住 #content div 的最小宽度，它可以很好地工作。

【讨论】：

【解决方案2】：

我有点晚了，但这里有一个答案。不要忘记您可以设置 HTML 元素的样式！

html {
  padding: 20pt;
}

body {
  margin: auto;
}

就是这样！

【讨论】：

最佳答案在这里！很简单，可以满足 OP 的要求。 padding-left 不过更好。使用padding，您可以在所有 4 个方面获得它。也可以使用padding: 20pt 0 0 0;

【解决方案3】：

达到它的唯一方法是使用margin: 0 auto 和max-width 的组合。如果您使用像素而不是百分比，您可以添加媒体查询，以便最大宽度始终小于窗口/包装器。

margin: 0 30px;

@media (min-width: 1280px) {
  margin: 0 auto;
  max-width: 1220px;
}

这将有 30 像素的边距，直到屏幕尺寸为 1280 像素，然后最大宽度将保持不超过 1220 像素。

【讨论】：

【解决方案4】：

您可以使用margin-left:#px 或

margin:5px auto #px #px;

最后一个#px 是左；其像边距：TOPpx Rightpx Bottompx Leftpx

【讨论】：

是的，我知道。请检查这个stackoverflow.com/questions/13526096/…

【解决方案5】：

这些是我的发现 - 这不是一个答案，当然也不全面 - 这些是我追查类似问题的笔记。（N:B 可能没有用严格正确的技术术语表达，但希望你能明白主要意思）

我的辅助备忘录 - 用于解决意外的定位问题。

浮动或绝对定位或定位固定元素，宽度自动缩小到内容尺寸。

始终为浮动元素指定宽度和高度 - 这样可以避免混淆。

不管定位一个元素的高度=内容高度如果没有指定高度。

尝试使用自动垂直边距时，请注意折叠边距。除非明确控制触摸垂直边距会相互折叠。

使用边距自动水平确保如果不是块元素设置 css display: block;并且无论如何始终确保宽度

注意 IE8 和更早的不符合标准的盒子模型（即在宽度中包含填充和边框，而不是附加到）- 分辨率始终使用 html 5 doctype ...<!DOCTYPE html>

根据您对问题的描述-我猜您遇到的问题归结为元素与其容器之间的关系-这是我遇到的问题。 jsfiddle.net 是玩这类东西的好地方。

【讨论】：

【解决方案6】：

您通常可以使用透明边框和 background-clip 属性来模拟最小边距。这是一个例子： https://codepen.io/waterplea/pen/MWKYPxW

.margin {
  width: 400px;
  padding: 40px;
  box-sizing: border-box;
  background: white;
  background-clip: padding-box; // necessary for border to be transparent
  margin: auto;
  border-radius: 48px; // 48 - 40 = 8px border radius
  border: 40px solid transparent; // 40px minimum margin
  box-shadow: inset 0 0 0 1px gainsboro; // imittating 1px solid border;
}

注意：如果您使用溢出：隐藏在您的容器上，则无法像这样投下阴影。

【讨论】：

【解决方案7】：

如果我看到你的代码和问题，你可以这样写：

div{
 margin:5px 10% 5px 5%;
}

查看更多http://jsfiddle.net/spVNu/1/

【讨论】：

查看stackoverflow.com/questions/13526096/…
链接中没有清楚你想要什么。请解释一下或创建一个例子
在调整浏览器大小时，我想平均减少左右两侧的空间。所以我给了 margin:auto;如果我给了保证金：5px 10% 5px 5%；那么只有 10% 会减少，而 5% 将保持不变。
“如何设置左侧最小边距”是什么意思？
在调整浏览器大小时，如果使用自动，左边距也会减小。但我不希望在某个像素后减少左边距。这意味着最小边距