为什么这两个内联块不对齐？

Question

这两个内联块级元素 <div> 应该是对齐的（至少，我认为它们应该是对齐的）：

<div class="calendar">
    <div class="month">
        <div class="month-name">January</div>
    </div>
    <div class="day">
        <div class="day-number">21</div>
        <div class="day-name">Wednesday</div>
    </div>
</div>

<div class="button"></div>

我已经使用像素精度设置了每个 <div> 的高度：

.calendar {
    display: inline-block;
    width: 80px;
    height: 74px;
}
.calendar .month {
    background-color: firebrick;
    border-radius: 3px 3px 0 0;
}
.calendar .month-name {
    color: white;
    font-size: 13px;
    text-align: center;
    height: 26px;
}
.calendar .day {
    background-color: linen;
    border-radius: 0 0 3px 3px;
}
.calendar .day .day-number {
    color: black;
    font-size: 26px;
    font-weight: bold;
    text-align: center;
    height: 30px;
}
.calendar .day .day-name {
    color: darkgray;
    font-size: 10px;
    text-align: center;
    height: 18px;
}

.button {
    background-color: silver;
    display: inline-block;
    border-radius: 3px;
    width: 220px;
    height: 74px;
}

但是这会产生以下结果：

这里有一个fiddle展示了这段代码。

这让我很疯狂，但结果在几个浏览器中都是一致的，所以我一定做错了什么。

有人能解释一下为什么，并提供一个修复方法吗？

- BenMorel

---

@Oriol "这个问题之前已经被问过并且已经有了答案。" 不，我之前问过这个问题。最好将另一个标记为此问题的副本？ - BenMorel

是的，您的问题比较旧，但另一个问题更“受欢迎”：3953与155个浏览量，10与1个赞同，1与0个收藏，34与5个答案的赞同。如果您不同意，请随时在元中讨论它。 - Oriol

有点意思，我想。不过，收到“此问题已经被问过”的消息还是相当粗鲁的；这个消息可以改进一下。 - BenMorel

Answer 1

在具有inline-block的任何元素上执行vertical-align:top。

.calendar { vertical-align: top; }

解释：inline-block仍然是“内联”的，垂直对齐方式是基线，这意味着它们不一致，并且其高度会有所不同，使用top可以使它们始终从顶部开始对齐。

- meder omuraliev

---

谢谢，你能解释一下为什么吗？ - BenMorel

inline-block元素仍然是“行内”元素，垂直对齐方式为基线，这意味着它们不一致，并且其高度会有所变化，“top”使它们始终从顶部开始。 - meder omuraliev

Answer 2

将日历div的垂直对齐方式设置为顶部

.calendar {
    display: inline-block;
    width: 80px;
    height: 74px;
    vertical-align:top;
}

jsFiddle example

- j08691

---

谢谢，你能解释一下为什么吗？ - BenMorel

因为默认的垂直对齐方式是基线，而您需要它们顶部对齐。 - j08691

谢谢，你们的答案都很好，我已经接受了其中一个，并点赞了另一个！ - BenMorel