内联块元素垂直对齐到底部（而不是默认顶部），没有明显的原因

Question

在my page上，我有一个不同高度的元素列表，设置为inline-block，宽度约为33％，每行3个。在垂直对齐方面，它们应该与顶部对齐（默认行为）。相反，它们似乎与底部对齐，这对我来说毫无意义。

是什么让他们这样做？

CSS：

.resource_item {
    display: inline-block;
    width: 31%; 
    margin-bottom: 30px;    
    padding-left: 1%;
    padding-right: 1%;
}

PHP：

while ...

    ?>
    <div class='resource_item'>
        Content
    </div>
    <?php

endwhile;

Answer 1

vertical-align的默认值为baseline，这就是它与底部对齐的原因。您可以使用vertical-align: top或其他可接受的值更改值

.resource_item {
    display: inline-block;
    vertical-align: top;
}

vertical-align的可接受值：

/* keyword values */
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;

/* <length> values */
vertical-align: 10em;
vertical-align: 4px;

/* <percentage> values */
vertical-align: 20%;

/* Global values */
vertical-align: inherit;
vertical-align: initial;
vertical-align: unset;

来源：https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align#Syntax