元素之间的间距 [英] Spacing between elements

问题描述

我是一个完整的CSS和HTML的开始，我正在建立我的第一个基本的网页进行训练。

I'm a complete begginer in CSS and HTML and I'm building my first basic page for training.

我现在想做的是，两个元素，而不使用< br> 。目前我使用的是：

What I want do do now is have spacing between two elements without using <br>. Currently I'm using this:

.formClear {
  clear:left;
  height:25px;
}

它适用于间距，但这是一个正确的方法吗？ lineheight会更好吗？

It works for spacing but do you this a correct way to do it? Would lineheight work better?

line-height: 20px; 

您的建议是什么？
请记住我开始学习了：）

What are your suggestions? Please remember I'm starting to learn :)

谢谢！

推荐答案

这取决于你想要完成什么。假设您有以下结构：

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

b $ b

当然，顶部还有相应的空格值：

Of course, there are also the corresponding values for space on the top:

padding-top
margin-top

一些示例：

<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>

这里你可以看到这个代码在操作：http://jsfiddle.net/ramsesoriginal/H7qxd/

here you can see this code in action: 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
                                               |       +
     +===================+ <-------------------+       |
                                                       |
  +-------------------------+ <------------------------+

这篇关于元素之间的间距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！