如何获得浮动元素之间的垂直间距？

Question

以下是我尝试实施的

的UI原型

以下是我当前的布局和JSFiddle

我设计这种外观的方式是将广告系列和时间戳浮动到右侧，以便文本的其余部分环绕而不是相交。如果其他人有任何建议，我全都耳朵。

我的问题是关于我强调的红色部分。我正在尝试在我的案例中在广告系列和时间戳之间留出一些间距。 这些是我尝试应用于时间戳的样式

#time_stamp {
    color: #B67F30;
    margin-left: 20px;
    margin-top: 20px;
    transform: translateY(20px);
}

我知道风格本身是有效的，因为边距左边和颜色都在生效。但是我用来给垂直间距，margin-top和transform：translateY这两个属性都没有任何影响。有谁知道这是什么问题？我应该使用不同的风格还是不同的设计？

Answer 1

尝试使用div而不是spans

<div id="updates"> 
    <h1 id="vertical"><img src="mark.png" />Recent Updates</h1>
    <div id="tofloat"> 
        <div id="headline">Campaign </div> <BR />  
        <div id="time_stamp">2014.02.14</div>
    </div>
    <p>
         Loreum ipsum doloar sit amet, consectetur adipiscing
        elit. Etiam in sagittis nisl. Donec et convallis eros, quis volutpat.
    </p>            
</div>

JFiddle https://jsfiddle.net/5r1ojjdn/7/

Answer 2

它不起作用的原因是因为<span>是内嵌元素。内联元素不受margin属性的影响。因此，你可以让你的“转换”按钮表现得像一个块元素，并且仍然保持内联，这样做：

#headline {
    ...
    display: inline-block;
    margin-bottom: 5px;  /* now it will work */
}

JSFiddle