为何按钮与输入框设同高(5vh)却更小且高度未对齐？

问题根源 #

1. 浏览器对<button>和<input>存在默认样式差异，按钮自带默认内边距，且行内块元素默认按基线对齐，导致视觉上错位。
2. 默认box-sizing: content-box会让设置的height仅代表内容高度，元素实际总高度为height + padding + border，两者样式不一致时，高度就会出现偏差。

修复步骤 #

• 给所有表单元素统一设置box-sizing: border-box，确保设置的高度包含内边距和边框。
• 清除按钮的默认内边距，或让输入框与按钮保持一致的边框/内边距配置。
• 给表单容器添加display: flex和align-items: center，强制元素垂直居中对齐。

修改后的完整代码 #

CSS 部分

html {
    height: 100%;
}

#box {
    height: 18.52vh;
    width: 72.92vw;
    background: #ffffff1a;
    display: flex;
    align-items: center;
    justify-content: center;
    border: thick solid red;
}

body {
    background-image: linear-gradient(#000000, rgb(119, 0, 0));
}

.container {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.center {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/* 统一表单元素盒模型，清除默认内边距 */
input, button {
    box-sizing: border-box;
    padding: 0;
}

.butt {
    background-color: #9c0101a8;
    color: rgb(211, 211, 211);
    font-size: 16px;
    border: none;
}

::placeholder {
    color: rgb(0, 0, 0);
    opacity: 1;
}

:-ms-input-placeholder {
    color: rgb(0, 0, 0);
}

::-ms-input-placeholder {
    color: rgb(0, 0, 0);
}

.font_size_auto{
    font-size: clamp( 0px, 3.5vh, 3vw);
    font-family: times;
}

.font_size_auto_enter{
    font-size: clamp( 0px, 3.5vh, 1.8vw);
    font-family: times;
}

HTML 部分

<body>
    <div class="container">
        <div id="box">
            <form method="POST" style="display: flex; align-items: center; gap: 4px;">
                <input name="text" class="font_size_auto" style="color: #000000; background-color: #9c0101a8; border-color:rgb(0, 0, 0); height: 5vh; width: 20vw; border: 1px solid rgb(0,0,0);" placeholder="enter name here">
                <button type="submit" class="font_size_auto_enter butt" style="text-align:center; width: 6vw; height: 5vh; background-color: #9c0101a8;">
                    enter
                </button>
            </form>
        </div>
    </div>
</body>

关键修改点 #

1. 新增input, button { box-sizing: border-box; padding: 0; }，统一盒模型并清除默认内边距。
2. 给<form>添加display: flex; align-items: center; gap: 4px;，让元素垂直居中并添加间距。
3. 给输入框明确设置border: 1px solid rgb(0,0,0);，确保和按钮的边框状态一致（按钮设置了border: none）。

内容的提问来源于stack exchange，提问作者That Cat