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。

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

Answer 3

您不需要创建像＆lt; br＆gt;标签或任何其他间隔标签。你应该做的是将样式应用于需要在其周围间隔的元素。

假设您想要有空格的元素是名为“myelement”的DIV标记。

<div class="myelement">
    I am content that needs spacing around it!
</div>

这是您需要使用的样式。

 .myelement {
  clear:left;
  height:25px;
  margin: 20px;  // See below for explanation of this
 }

这是您可以用来更好地理解初学者CSS的样式

.myelement {
  clear:left;
  height:25px;
  margin-top:20px;
  margin-right:20px;
  margin-bottom:20px;
  margin-left:20px;
 }

另外，在你知道自己在做什么之前，请避免使用height：CSS属性。使用高度作为初学者难以排除故障时，您会遇到一些问题。

Answer 4

通常我们在其中一个元素上使用边距，而不是间隔元素。

Answer 5

在元素周围使用边距。

.box {
        margin: top right bottom left;
 }

.box {
        margin: 10px 5px 10px 5px;
}

这会在元素之外添加空间。因此不包括背景颜色，边框等。

如果要在元素中添加间距，请使用填充。可以用与上面相同的方式调用它。

元素之间的间距

5 个答案: