两个inline-block属性div无内容时水平对齐，填充内容后下移问题求解

问题产生原因 #

该问题是inline-block元素的默认垂直对齐规则导致的：
inline-block元素默认的vertical-align属性值为baseline（基线对齐）。无内容的inline-block元素的基线为自身的底部边缘，而填充了文本内容的inline-block元素的基线为内部最后一行文本的基线，两者对齐基准不一致，就会出现有内容的元素下移的错位效果。
另外你当前将两个子元素宽度分别设置为50%和49%，是为了规避inline-block元素之间因HTML换行产生的空白节点导致总宽度超出父容器的问题，这个点也可以同步优化。

解决方法 #

• 核心解决方法：给两个inline-block元素统一设置对齐基准，添加vertical-align: top属性，让两者都以顶部边缘作为对齐参考，即可解决错位问题。你可以根据实际需求将属性值替换为middle（居中对齐）或bottom（底部对齐），只要两个元素的vertical-align值保持一致即可。
• 宽度优化方案：给父元素.header添加font-size: 0属性，消除inline-block之间的空白间隙，之后再给子元素单独恢复需要的字体大小，就可以将.buttonsParent的宽度调整为50%，完全撑满父容器，不需要预留1%的间隙。

修改代码示例 #

/* 新增/修改的属性已标注 */
.header
{
    background-image: url("images/bg.jpg");
    background-size: cover;
    width: 100%;
    height: 50%;
    font-size: 0; /* 新增：消除inline-block间的空白间隙 */
}
.NameProfession
{
    background-color: pink;
    height: 100%;
    width: 50%;
    display: inline-block;
    vertical-align: top; /* 新增：统一顶部对齐 */
    font-size: 16px; /* 新增：恢复字体大小，可根据需求调整数值 */
}
.buttonsParent
{
    background-color: red;
    width: 50%; /* 修改：从49%改为50%，完全占满剩余宽度 */
    display: inline-block;
    height: 100%;
    vertical-align: top; /* 新增：统一顶部对齐 */
}

内容的提问来源于stack exchange，提问作者Mistr Harry