如何在CSS中设置输入元素之间的间距？

Question

如何将电子邮件和密码字段按其图标的确切高度分隔？我尝试使用行高，但它似乎只适用于文本。

当然，我可以简单地查看Firefox的Web Inspector中图标的高度，然后说一下margin-bottom：xx px，但这真的是最好的方法吗？

我的代码如下所示：

            <form class="signup-field">
            <h1>Enter your email to start.</h1>
            <h2>Choose a strong password.</h2>
            <div class="input-group">
                <span class="input-group-addon"></span>
                <input type="text" class="form-control" placeholder="Email" /><br />
            </div>
            <div class="input-group">
                <span class="input-group-addon"></span>
                <input type="password" class="form-control" placeholder="Password" /><br />
            </div>
            <div class="input-group t-c-submit">
                <input type="checkbox">I agree to the terms and conditions.
                <button type="button" class="button">Get Started</button>
            </div>
            </form>

我的CSS看起来像这样：

@font-face {
font-family: "simple-line";
src: url("simple-line-icons-24.woff") format('woff');
}
.container {
    max-width: 880px;
}
.signup {
    background-color: #48b7d6;
    color: #fff;
    font-family: Montserrat;
}
.signup h1 {
    font-size: 3.2em;
}
.signup h2 {
    font-size: 1.188em;
}
.signup-field input {
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: 1px dotted #dce3e7;
    margin: 10px;
    color: #fff;
}
.signup-field input::placeholder {
    color: #fff;
}
.signup-field button {
    float:right;
    font-size: 1.188em;
    background: none;
    color: #fff;
    border: 1px solid #dce3e7;
    margin: 12px;
    min-width: 140px
}
.signup-field button:hover {
    background-color: #2fa1ba;
}

.signup-field .input-group-addon {
    font-family: simple-line;
    font-size: 1.188em;
    border: 1px solid #dce3e7;
    background: none;

    border-radius: 0;
    color: #fff;
}
/* Bootstrap overrides (also the above 3 lines) */
.input-group {
    width: 100%;
    line-height: 200%;
}