43

我检查过在 CSS 中使用百分比边距但想要以像素为单位的最小边距？. 它有如何在使用百分比时实现最小边距。但我正在使用

width:80%;
margin:5px auto;

如何在左侧设置最小边距。我在调整浏览器窗口大小时使用了自动边距

谢谢

4

8 回答 8

20

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

#content {
    margin: auto;
}

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

我认为这将实现您正在寻找的东西。请记住 #content div 的最小宽度，它可以很好地工作。

于 2014-06-30T11:07:59.787 回答
14

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

html {
  padding: 20pt;
}

body {
  margin: auto;
}

就是这样！

于 2016-08-04T18:26:02.113 回答
8

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

margin: 0 30px;

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

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

于 2018-11-27T15:10:46.940 回答
0

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

margin:5px auto #px #px;

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

于 2012-11-23T10:18:18.050 回答
0

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

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

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

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

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

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

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

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

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

于 2012-11-23T11:29:08.843 回答
0

您通常可以使用透明边框和 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;
}

注意：如果你使用溢出：隐藏在你的容器上，没有办法像那样投下阴影。

于 2020-06-05T11:15:39.553 回答
0

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

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

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

于 2022-02-20T01:32:00.443 回答
-2

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

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

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

于 2012-11-23T10:16:53.677 回答