显示行内块不适用于边距

Question

为什么这两个元素没有内联？

我希望这两个元素垂直对齐

<div class="label">Input label</div>
<div class="input">
    <div></div>
</div>

.label,
.input {
    display:inline-block;
}

.label {
    margin:2px 8px;
    font-size:11px;
}

.input {
    margin:10px 2px;
}

.input > div {
    height:20px;
    width:20px;
    background:red;
}

Answer 1

您可以添加 vertical-align: middle。默认值为 baseline。边距有点无关紧要。

Updated Example

.label,
.input {
    display: inline-block;
    vertical-align: middle;
}

显示行内块不适用于边距

display inline-block not working with margin

css