0

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

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

在我的外部 css 文件中

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

}

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

4

5 回答 5

1

尝试这个

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


}

.home-middle
{
    margin-top: 10px;
}
</style>
于 2013-05-26T11:05:08.767 回答
1

添加display: block到跨度样式

演示http://jsfiddle.net/kevinPHPkevin/Ep8G8/

.headingUserName {
    font-size: 24px;
    margin-bottom: 10px;
    display:block;
}
于 2013-05-26T11:05:55.730 回答
1

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

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

.headingUserName{
  display: inline-block;
  margin-bottom: 10px;
}
于 2013-05-26T11:12:43.447 回答
0

这应该工作

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

JS 小提琴演示

或作为矢量的解决方案

.headingUserName {
    font-size: 24px;
    margin-bottom: 10px;
    display:block;
}
于 2013-05-26T11:02:19.407 回答
0

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

.headingUserName{
    font-size: 24px;
    margin-bottom: 20px;
    display: block;
于 2013-05-26T11:06:22.657 回答