为何<input>元素尺寸计算方式异于其他元素？如何修复？

核心解决思路 #

• 统一全局盒模型，避免手动计算边框对尺寸的影响
• 消除浏览器对表单元素的默认样式差异
• 调整行高确保文字垂直居中，同时让高度精确匹配设定值

修改后的完整代码 #

CSS 代码

/* 全局统一盒模型，设置的宽高将包含边框和内边距 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.options_display {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.options_style * {
    text-align: center;
    font-size: medium;
    font-family: arial;
    padding: 0;
    margin-bottom: 2px;
    width: 225px;
    height: 25px;
    /* 统一边框样式，消除浏览器默认差异 */
    border: 1px solid #ccc;
    /* 行高设为高度减去上下边框总和，保证文字垂直居中 */
    line-height: 23px;
}

/* p标签不需要边框，单独重置样式 */
.options_style p {
    border: none;
    line-height: 25px;
}

[hidden] {
    display: none;
}

HTML 代码（无需修改，保持原结构）

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta name="viewport" content="width=device-width">
    </head>
    <body onload="">    <!-- Disable, hide first option -->
        <div style="float: left; position: relative; left: 50%;">
            <div style="float: left; position: relative; left: -50%;">
                <div class="options_display options_style">
                    <select>
                        <option>Select test</option>
                        <option>Option 0</option>
                        <option>Option 1</option>
                        <option>Option 2</option>
                    </select>
                    <input type="number" placeholder="Input test 0">
                    <input type="number" placeholder="Input test 1">
                    <button onclick="">Button test</button>
                    <p id="text_id">Test</p>
                </div>
            </div>
        </div>
    </body>
</html>

关键修改说明 #

1. box-sizing: border-box：默认的content-box盒模型中，设置的宽高仅代表内容区域，边框和内边距会额外增加元素总尺寸，这就是你看到<input>和其他元素尺寸不一致的核心原因。改用border-box后，你设置的225px宽、25px高就是元素的最终总尺寸，无需手动减去边框大小。
2. 统一边框样式：不同浏览器对<input>、<select>这类表单元素的默认边框宽度、样式有差异，手动设置统一边框可以消除这种不一致。
3. 行高调整：你之前遇到的<input>高度约24.6px是浏览器字体渲染的小数像素问题，将行高设为「高度-上下边框总和」，既能保证文字垂直居中，也能让元素高度精确匹配25px。

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