向小部件添加内容时的 HTML + CSS 间距问题

Question

我正在尝试整理一个网页，但发现当我向小部件框添加内容时，总是出现白色间距。

当我在 widgetOne 类中添加一个 H2 时，我发现它然后将接下来的两个小部件向下推并出现一个空白区域。

我已将我的代码放在 codepen 上以便于审查: http://codepen.io/s_bruno1/pen/WRgVVm

        <div class="widget widgetOne">
            <h2>Test Heading</h2>
            <a href="">Find out more</a>
            <button>Test</button>
        </div>

如果有人也能建议如何最好地对百分比进行编码，我们将不胜感激。我自己尝试过这种方法，但觉得这可能不是最好的方法。

Answer 1

您的问题是未设置垂直对齐。这是让它工作的代码

.widget {
    min-height: 400px;
    display: inline-block;
    margin-bottom: 15px;
    vertical-align: top;
}