元素之间的间距

Question

我是CSS和HTML的完全开始,我正在构建我的第一个基本培训页面.

我现在要做的是在两个元素之间有间距而不使用<br>.目前我正在使用这个:

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

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

line-height: 20px; 

你有什么建议？请记住我开始学习:)

谢谢!

Answer 1

这取决于你想要完成什么.我们假设您有这样的结构:

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

如果您希望单行之间的空间更大,则应该增加

line-height

如果你想要最后的空间更大,你应该增加

margin-bottom

如果你希望最后的空间更大,但是背景填充空间(或空间周围的边框)使用

padding-bottom

当然,顶部还有相应的空间值:

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/

当然你应该把你的样式放在一个单独的样式表中,内联代码只是为了显示效果.

在这里,您有一个示意图,说明哪个值会影响:

                                   line-height
           content                 +
                                   |      padding-bottom
                  <----------------+      +
           content                        |    border-bottom
                                          |    +
                                          |    |
        +-------------+<------------------+    |       margin-bottom
                                               |       +
     +===================+ <-------------------+       |
                                                       |
  +-------------------------+ <------------------------+

Answer 2

如果您希望元素之间有垂直间距，请使用margin。

如果不需要，请不要添加额外的元素。