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

Question

这是我要实现的 UI 原型

这是我当前的布局 JSFiddle

我设计此外观的方法是让广告系列和时间戳向右浮动，以便文本的其余部分环绕它而不是相交。如果其他人有任何建议，我会洗耳恭听。

我的问题是关于我突出显示的红色部分。在我的案例中，我试图在活动和时间戳之间留出一些间隔。这些是我尝试在时间戳上应用的样式

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

我知道样式本身是有效的，因为 margin-left 和 color 正在生效。然而，我用来提供垂直间距的两个属性 margin-top 和 transform:translateY 都没有任何效果。有谁知道问题是什么？我应该使用不同的风格还是不同的设计？

Answer 1

尝试使用 div 而不是 span

<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> 是一个 inline 元素。而内联元素不受margin属性的影响。所以，你可以让你的 "Convert" 按钮表现得像一个块元素，并且仍然保持内联，通过这样做：

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

JSFiddle

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

How to get vertical spacing between floated elements?

html

css

user-interface

user-experience

css-float