Html 元素之间的间距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9114664/
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
Spacing between elements
提问by danielaG
I'm a complete begginer in CSS and HTML and I'm building my first basic page for training.
我是 CSS 和 HTML 的完整初学者，我正在构建我的第一个基本培训页面。
What I want do do now is have spacing between two elements without using <br>. Currently I'm using this:
我现在想做的是在不使用<br>. 目前我正在使用这个：
.formClear {
clear:left;
height:25px;
}
It works for spacing but do you this a correct way to do it? Would lineheight work better?
它适用于间距，但你这样做是正确的方法吗？lineheight 会更好吗？
line-height: 20px;
What are your suggestions? Please remember I'm starting to learn :)
你有什么建议？请记住我开始学习:)
Thank you!
谢谢！
回答by ramsesoriginal
It depends on what exactly you want to accomplish. Let's assume you have this structure:
这取决于您究竟想要完成什么。让我们假设你有这个结构：
<p style="width:400px;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
</p>
If you want the space between the single lines to be bigger, you should increase
如果你想让单行之间的空间更大，你应该增加
line-height
If you want the space at the end to be bigger, you should increase
如果你想最后的空间更大，你应该增加
margin-bottom
If you want the space at the end to be bigger, but have the background fill the space (or the border around the space) use
如果您希望末尾的空间更大，但让背景填充空间（或空间周围的边框），请使用
padding-bottom
Of course, there are also the corresponding values for space on the top:
当然，上面的space也有对应的值：
padding-top
margin-top
Some examples:
一些例子：
<p style="line-height: 30px; width: 300px; border: 1px solid black;">
Space between single lines
Space between single lines
Space between single lines
Space between single lines
Space between single lines
Space between single lines
Space between single lines
Space between single lines
</p>
<p style="margin-bottom: 30px; width: 300px; border: 1px solid black;">
Space at the bottom, outside of the border
Space at the bottom, outside of the border
Space at the bottom, outside of the border
Space at the bottom, outside of the border
Space at the bottom, outside of the border
Space at the bottom, outside of the border
Space at the bottom, outside of the border
Space at the bottom, outside of the border
Space at the bottom, outside of the border
</p>
<p style="padding-bottom: 30px; width: 300px; border: 1px solid black;">
Space at the bottom, inside of the border
Space at the bottom, inside of the border
Space at the bottom, inside of the border
Space at the bottom, inside of the border
Space at the bottom, inside of the border
Space at the bottom, inside of the border
Space at the bottom, inside of the border
Space at the bottom, inside of the border
Space at the bottom, inside of the border
</p>
here you can see this code in action: http://jsfiddle.net/ramsesoriginal/H7qxd/
在这里你可以看到这个代码在起作用：http: //jsfiddle.net/ramsesoriginal/H7qxd/
Of course you should put your styles in a separate stylesheet, the inline code was just to show the effect.
当然你应该把你的样式放在一个单独的样式表中，内联代码只是为了显示效果。
here you have a little schematic demonstration of what which value affects:
在这里，您有一个关于哪个值影响什么的示意性演示：
line-height
content +
| padding-bottom
<----------------+ +
content | border-bottom
| +
| |
+-------------+<------------------+ | margin-bottom
| +
+===================+ <-------------------+ |
|
+-------------------------+ <------------------------+
回答by Quentin
回答by Downpour046
You do not need to create an element like the < br > tag, or any other spacer tag. What you should do is apply a style to the element that needs spacing around it.
您不需要创建像 <br> 标签或任何其他间隔标签这样的元素。您应该做的是将样式应用于需要在其周围留出空间的元素。
Let's say the element you want to have space around is a DIV tag called "myelement".
假设您想要在周围留出空间的元素是一个名为“myelement”的 DIV 标签。
<div class="myelement">
I am content that needs spacing around it!
</div>
This is the style you would need to use.
这是您需要使用的样式。
.myelement {
clear:left;
height:25px;
margin: 20px; // See below for explanation of this
}
This is the style you can use to better understand CSS for beginners
这是您可以用来为初学者更好地理解 CSS 的样式
.myelement {
clear:left;
height:25px;
margin-top:20px;
margin-right:20px;
margin-bottom:20px;
margin-left:20px;
}
Also, avoid using the height: CSS property until you know what you are doing. You will run into some issues when using height that are harder to troubleshoot as a beginner.
另外，避免使用 height: CSS 属性，直到您知道自己在做什么。在使用高度时，您会遇到一些作为初学者难以解决的问题。
回答by Diodeus - James MacFarlane
In general we use margins on one of the elements, not spacer elements.
一般来说，我们在元素之一上使用边距，而不是间隔元素。
回答by SpaceBeers
Use a margin to space around an element.
使用边距在元素周围留出空间。
.box {
margin: top right bottom left;
}
.box {
margin: 10px 5px 10px 5px;
}
This adds space outside of the element. So background colours, borders etc will not be included.
这增加了元素外部的空间。因此将不包括背景颜色、边框等。
If you want to add spacing within an element use padding instead. It can be called in the same way as above.
如果要在元素内添加间距，请改用填充。可以像上面一样调用它。
