如何在span和div之间提供空间

Question

我想在span和div之间给出空格，如下所示

<span class="headingUserName">JAVA MAN</span>
<div class="home-middle">
 Content
</div>

在我的外部css文件中

.headingUserName{
    font-size: 24px;
    margin-bottom: 10px;

}

这不是在div和span之间提供空间。如何解决这个问题。

Answer 1

试试这个

<style>
.headingUserName{
    font-size: 24px;


}

.home-middle
{
    margin-top: 10px;
}
</style>

Answer 2

将display: block添加到范围样式

DEMO http://jsfiddle.net/kevinPHPkevin/Ep8G8/

.headingUserName {
    font-size: 24px;
    margin-bottom: 10px;
    display:block;
}

Answer 3

将显示设置为block肯定能满足您的需求。但它也会使你的span元素覆盖所有宽度，因为块元素默认为100％宽度。

如果您不想这样，可以改用inline-block。您的元素保持自动宽度，但您可以将其设置为具有块元素中的边距。

.headingUserName{
  display: inline-block;
  margin-bottom: 10px;
}

Answer 4

这应该有效

.home-middle
{
   margin-top:10px;
}

JS Fiddle Demo

或作为Vector的解决方案

.headingUserName {
    font-size: 24px;
    margin-bottom: 10px;
    display:block;
}

Answer 5

如果您真的希望Span提供间距，出于某种原因，您必须将其display属性设置为block，如下所示：

.headingUserName{
    font-size: 24px;
    margin-bottom: 20px;
    display: block;