Question

我检查了 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

使用了自动保证金

由于

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自动和最大宽度。如果您使用像素而不是百分比，则可以添加媒体查询，以便最大宽度始终小于窗口/包装器。

margin: 0 30px;

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

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

Answer 4

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

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

选中此项以获取更多http://jsfiddle.net/spVNu/1/

Answer 5

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

margin:5px auto #px #px;

最后一个#px是左边的; 它的边缘：TOPpx Rightpx Bottompx Leftpx

Answer 6

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

我的援助备忘录 - 追逐意想不到的定位问题。

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

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

如果没有指定高度，则无论定位元素的高度=内容高度。

在尝试使用自动边距自动垂直时，请注意边距会折叠。除非明确控制，否则垂直边距会相互坍塌。

当使用margin自动水平时确保如果没有块元素设置css display：block;并且无论如何始终确保宽度＆lt; 100％的容器。

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

从你对问题的描述 - 我猜你所遇到的问题取决于元素和它的容器之间的关系 - 这就是我遇到的问题。 jsfiddle.net是玩这种东西的好地方。

Answer 7

您通常可以使用透明边框和background-clip属性来模仿最小边距。这是一个例子：

.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;
}

注意：如果您使用溢出：隐藏在容器上，就没办法像阴影一样

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

7 个答案: