Html 在 css 中使用自动边距但想要最小边距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13526883/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using a auto margin in css but want a minimum margin
提问by harikrishnan.n0077
I had checked Using a percentage margin in CSS but want a minimum margin in pixels?. It had how to implement a minimum margin when using percentage. But i am using
我查过 在 CSS 中使用百分比边距但想要以像素为单位的最小边距？. 它有如何在使用百分比时实现最小边距。但我正在使用
width:80%;
margin:5px auto;
How to set a minimum margin on the left side. i had used auto margin as per Reducing the space equally when resizing browser window
如何在左侧设置最小边距。我按照在调整浏览器窗口大小时均等地减少空间使用了自动边距
Thanks
谢谢
采纳答案by sandeep
If i saw your code & question may be you can write like this:
如果我看到你的代码 & 问题可能是你可以这样写：
div{
margin:5px 10% 5px 5%;
}
Check this for more http://jsfiddle.net/spVNu/1/
回答by Patrick
It might take another div to accomplish this task. I will refer to the div you are talking about as the #content div. I know that yours will have a bit more css. This is just my example of the margin in question. Next we would put the #content div in a div we will call #container. We will set the margins to auto in this div as well. The added aspect will be that we will add padding (right and left) to the #container div.
完成此任务可能需要另一个 div。我将您所说的 div 称为 #content div。我知道你的 css 会多一点。这只是我所讨论的保证金的例子。接下来，我们将#content div 放在我们将调用#container 的div 中。我们也将在这个 div 中将边距设置为自动。添加的方面是我们将向#container div 添加填充（右侧和左侧）。
#content {
margin: auto;
}
#container {
padding-right: 5px;
padding-left: 5px;
}
I think that this would achieve what you are looking for. Keep in mind a min-width for the #content div and it could work nicely.
我认为这将实现您正在寻找的东西。请记住#content div 的最小宽度，它可以很好地工作。
回答by Greg Searle
I'm a little late, but here's an answer. Don't forget that you can style the HTML element!
我有点晚了，但这里有一个答案。不要忘记您可以设置 HTML 元素的样式！
html {
padding: 20pt;
}
body {
margin: auto;
}
That's it!
就是这样！
回答by yairniz
The only way to reach it will be to use a combination of margin: 0 auto and max-width. If you use pixels and not percentage, you may add media queries so the max-width is always smaller than the window/wrapper.
达到它的唯一方法是使用 margin: 0 auto 和 max-width 的组合。如果您使用像素而不是百分比，则可以添加媒体查询，以便最大宽度始终小于窗口/包装器。
margin: 0 30px;
@media (min-width: 1280px) {
margin: 0 auto;
max-width: 1220px;
}
This will have margin of 30px until screen size is 1280px and then the max-width will keep it no more than 1220px.
这将有 30 像素的边距，直到屏幕尺寸为 1280 像素，然后最大宽度将保持不超过 1220 像素。
回答by james
you could use margin-left:#pxor
你可以使用margin-left:#px或
margin:5px auto #px #px;
the last #px is for left; its like margin:TOPpx Rightpx Bottompx Leftpx
最后一个#px 是左边；它就像边距：TOPpx Rightpx Bottompx Leftpx
回答by codepuppy
These are my findings - this is not meant to be an answer and certainly is not comprehensive - these are my notes from chasing down a similar problem. (N:B Probably not expressed in strictly correct technical terms but hopefully you will get the main meaning)
这些是我的发现 - 这并不是一个答案，当然也不全面 - 这些是我追查类似问题的笔记。（N:B 可能没有用严格正确的技术术语表达，但希望你能理解主要含义）
My aid memtheitroade - for chasing down un-expected positioning problems.
我的辅助备忘录 - 用于解决意外的定位问题。
floated or absolutely positioned or position fixed elements with width auto shrink to content dimensions.
浮动或绝对定位或定位固定元素，宽度自动缩小到内容尺寸。
Alwaysspecify a width and height for a floated element - this avoids confusion.
始终为浮动元素指定宽度和高度 - 这可以避免混淆。
Regardless of positioning the height of an element = content height if no height specified.
如果未指定高度，则无论定位元素的高度 = 内容高度。
Be aware of collapsing margins when attempting to use margin auto vertical. Unless explicitly controlled touching vertical margins will collapse into each other.
尝试使用自动垂直边距时，请注意折叠边距。除非明确控制，否则触摸垂直边距会相互塌陷。
When using margin auto horizontal ensure if not a block element set css display: block; and regardless always ensure width < 100% of container.
使用边距自动水平时确保如果不是块元素设置 css display: block; 并且无论如何始终确保宽度 < 100% 的容器。
Beware IE8 and earlier non standards compliant box model (i.e. included padding and border in the width instead of being additional to) -- resolution always use html 5 doctype ... <!DOCTYPE html>
当心 IE8 和更早的不符合标准的盒子模型（即在宽度中包含填充和边框而不是附加到）——分辨率总是使用 html 5 doctype ... <!DOCTYPE html>
From your description of the problem - I am guessing that issue you are having is down to the relationship between the element and it's container - which was the problem I encountered. jsfiddle.net is great place to play with this sort of thing.
根据您对问题的描述 - 我猜您遇到的问题归结为元素与其容器之间的关系 - 这就是我遇到的问题。jsfiddle.net 是玩这种东西的好地方。
