Html 保证金不起作用？两个元素之间需要空间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18469784/
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
Margin doesn't work? Need space between two elements
提问by Patrick Bateman
First of all, I do apologize I don't put my link here, it's a site for work and I'm not allowed. I'll post the relevant parts of my code if necessary though.
首先，我很抱歉我没有把我的链接放在这里，这是一个工作网站，我不被允许。如果有必要，我会发布我的代码的相关部分。
So the problem is pretty basic - i have one div with some images, and a header <h3>below where my content starts . No matter how much I try to create some space between the two, it doesn't work. I've tried margin and padding on both elements, changing between position relative and absolute, and throwing in lots of <br>tags. Nothing works!
所以这个问题很基本 - 我有一个带有一些图像的 div 和一个标题， <h3>下面是我的内容开始的地方。无论我如何尝试在两者之间创造一些空间，它都不起作用。我已经在两个元素上尝试了边距和填充，在相对位置和绝对位置之间改变，并加入了很多<br>标签。没有任何作用！
What causes my two elements to be so attracted to each other? What may cause inability to create space between two elements?
是什么让我的两个元素如此相互吸引？什么可能导致无法在两个元素之间创建空间？
Thanks!
谢谢！
Edit: here's my css code for the div:
编辑：这是我的 div css 代码：
.bmwrapper {
width: 720px;
position: relative;
margin-left: auto;
margin-right: auto;
z-index: 1;
}
.bmvenstre {
float: left;
text-align: left;
z-index: 1;
}
.bmhoyre {
float: right;
text-align: left;
z-index: 1;
}
So it's one big div that acts as a wrapper, and two divs (left and right) inside. The links are displayed as blocks:
所以它是一个充当包装器的大 div，里面有两个 div（左和右）。链接显示为块：
a.bmlink {
display: block;
margin: 0;
padding: 4px;
font-family: Tahoma, Verdana, Segoe, sans-serif;
text-transform: uppercase;
font-size: 18px;
font-weight: bold;
letter-spacing: 2px;
color: #08A;
text-decoration: none;
z-index: 2;
}
The header below this div is just a <h3>tag, then there's some text. Hope this helps!
这个div下面的标题只是一个<h3>标签，然后是一些文本。希望这可以帮助！
回答by Kevin Lynch
Sounds like margin collapse. Here are a couple of ways you could solve this:
听起来像保证金崩溃。您可以通过以下几种方法解决此问题：
Give your content div a transparent border or give your content div the css declaration of overflow: auto;
给你的内容 div 一个透明的边框或给你的内容 div 的 css 声明 overflow: auto;
Some people when they give it a 1pxborder they also give it a -1pxmargin to counter the border.
有些人在给它一个1px边界时，他们也会给它一个-1px余量来对抗边界。
回答by Henrique Feijo
You can try 2 things:
你可以尝试两件事：
1) Put the elements overflow:hidden
1）把元素overflow:hidden
2) put the elemnts display:block
2) 把元素 display:block
If number 2 messes up with your design, try putting them float:left;
如果数字 2 弄乱了您的设计，请尝试将它们设置为 float:left;
Since I don't have the code I can't give you more information, but when margins/paddings do not work, it is usually because you are either applying it to an Inline item (hence number 2) or you have a container where everything inside is floating, so the container won't have the proper height (hence number 1)
由于我没有代码，我无法为您提供更多信息，但是当边距/填充不起作用时，通常是因为您要么将其应用于内联项目（因此编号为 2），要么您有一个容器里面的所有东西都是浮动的，所以容器不会有合适的高度（因此编号为 1）
