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

【问题标题】：How to get vertical spacing between floated elements?如何获得浮动元素之间的垂直间距？
【发布时间】：2015-09-23 01:29:47
【问题描述】：

这是我正在尝试实现的 UI 原型

这是我当前的布局和JSFiddle

我设计这个外观的方法是让广告系列和时间戳向右浮动，以便其余文本环绕它而不是相交。如果其他人有任何建议，我会全力以赴。

我的问题是关于我突出显示的红色部分。在我的情况下，我正在尝试在活动和时间戳之间留一些间距。这些是我尝试在时间戳上应用的样式

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

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

【问题讨论】：

标签： html css user-interface css-float user-experience

【解决方案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/

【讨论】：

有没有更好的方法来做到这一点 - 风格明智 - 而不是在另一个 div 中的 div 中包含一个 div？

【解决方案2】：

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

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

JSFiddle

【讨论】：

啊，我明白了。这就是为什么margin top 不起作用的原因。你知道为什么 transform: translate 不起作用吗？这里什么都没有 - w3schools.com/css/css3_2dtransforms.asp 说这种样式必须应用于块元素。