两个div无法水平对齐：50%宽度失效，49%却正常？

我练习HTML和CSS时做了一个简单的登录表单，但用来输入姓名和姓氏的两个div没法水平对齐。给.child类设置width: 50%时，两个div上下堆叠；改成49%就能正常并排。我想知道为什么50%达不到预期的一半宽度效果，以及为什么减到49%就能实现水平对齐。

相关代码 #

CSS 代码 #

.title{
    padding: 1vh;
    text-transform: uppercase;
    font-size: 2vh;
}

.wrapper{
    margin: 0;
    padding: 0;
    background-color: yellow;
}

.parent{
    background-color: red;
    width: 100%;
}

.child{
    width: 50%; /* --------- 问题所在 */
    display: inline-block;
}

HTML 代码 #

<body class="body">
        <div class="center">
            <h1 class="title">Sign Up New User</h1>
            <form class="submit_form">
                <div class="wrapper">
                    <div class="parent">
                        <div class="child">
                            <label for="Name">Name:</label><br>
                            <input type="text" id="Name" name="fname">
                        </div>
                        <div class="child">
                            <label for="Surname">Surname:</label><br>
                            <input type="text" id="Surname" name="fsurname" >
                        </div>
                    </div>
                </div>
            </form>
        </div>
</body>

效果对比 #

• 50%宽度的错误效果：
  

• 期望的水平对齐效果：
  

原因分析 #

核心问题是inline-block元素之间的空白字符占位。当元素设置为inline-block时，HTML代码中两个.child div之间的换行、空格会被浏览器解析成一个空白字符（类似空格），这个空白字符会占据一定的宽度。

两个.child各占50%宽度，加上空白字符的宽度，总宽度就超过了父容器的100%，浏览器只能把第二个元素挤到下一行。而设置49%时，两个元素总宽度是98%，加上空白字符的宽度也没超过100%，所以能保持水平排列。

解决方案 #

这里提供几种实用的解决方法：

方法1：移除HTML中的空白字符 #

把两个.child div之间的换行、空格删掉，让它们紧挨着：

<div class="child">
    <label for="Name">Name:</label><br>
    <input type="text" id="Name" name="fname">
</div><div class="child">
    <label for="Surname">Surname:</label><br>
    <input type="text" id="Surname" name="fsurname" >
</div>

方法2：父元素设置font-size: 0，子元素恢复字体大小 #

空白字符的宽度由父元素的字体大小决定，给父元素设置font-size: 0可以消除空白字符的占位，之后再给子元素恢复正常字体大小：

.parent{
    background-color: red;
    width: 100%;
    font-size: 0; /* 消除空白字符宽度 */
}
.child{
    width: 50%;
    display: inline-block;
    font-size: 16px; /* 恢复正常字体大小，根据需求调整 */
}

方法3：使用Flexbox布局（推荐） #

Flexbox是现代CSS布局方案，完全不需要考虑空白字符的问题，直接给父元素设置display: flex即可：

.parent{
    background-color: red;
    width: 100%;
    display: flex; /* 启用Flex布局 */
}
.child{
    width: 50%;
}

内容的提问来源于stack exchange，提问作者Damiano Miazzi