在css中使用自动边距但需要最小边距

Question

我查过了 在CSS中使用百分比边距但想要像素的最小边距？.它有如何在使用百分比时实现最小保证金.但我正在使用

width:80%;
margin:5px auto;

如何在左侧设置最小边距.我在调整浏览器窗口大小时按照减少空间使用了自动边距

谢谢

Answer 1

完成此任务可能需要另外一个div.我将把你所说的div称为#content div.我知道你的css会更多.这只是我所讨论的保证金的例子.接下来我们将#content div放在div中,我们将调用#container.我们也会在此div中将边距设置为auto.增加的方面是我们将向#container div添加填充(向右和向左).

#content {
    margin: auto;
}

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

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

Answer 2

我有点晚了,但这是一个答案.不要忘记你可以设置HTML元素的样式!

html {
  padding: 20pt;
}

body {
  margin: auto;
}

而已!

Answer 3

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

margin: 0 30px;

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

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

Answer 4

您可以设置最大宽度，而不是使用边距，因此在小屏幕上您将获得至少 5px 的空间：

margin: 5px auto;
max-width: calc(100% - 5px)

也许9年前不支持，但现在所有浏览器都支持calc属性。

Answer 5

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

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

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