html - CSS anchor 内联 block 未对齐

Question

我有这个JSFiddle .有人可以解释一下，为什么 anchor 位置相对于其 sibling 不对齐？我知道我可以用相对位置和负顶部偏移来纠正它，但我不明白，为什么它首先是这样的。

HTML:

<div class="container">
    <div class="left"></div>
    <a href="">Some link</a>
    <div class="right"></div>
</div>

CSS:

.container {
    height: 25px;
    white-space: nowrap;
}

.container .left {
    border: 1px solid black;
    display: inline-block;
    margin: 0;
    height: 25px;
    width: 80px;
    padding: 0;
}

.container .right {
    border: 1px solid black;
    display: inline-block;
    margin: 0;
    height: 25px;
    width: 80px;
    padding: 0;
}

.container a {
    display: inline-block;
    border: 1px solid black;
    height: 25px;
    width: 300px;
    margin: 0;
}

Answer 1

出现此行为的原因是 .left 和 .right 元素中缺少文本。

默认情况下，内联 block 元素有vertical-align: baseline，但是因为你有空元素，所以没有基线，所以它们会自动对齐到parent基线(如果您在其中添加一些文本 — 即使是   — 您也会立即解决问题)

为了防止这种行为，您还可以为所有 .container 子级设置通用的 vertical-align。