如何去除form表单内input元素边角的多余空白间距

问题核心原因 #

• form元素的圆角没有做溢出裁剪，内部直角的输入框会露出边角间隙
• 邮箱输入框未设置匹配的圆角或高度未撑满，与外层form边框不贴合
• flex布局下未做垂直对齐，容易出现上下方向的错位间隙

修复后的完整CSS代码 #

form {
    width: 400px;
    height: 50px;
    display: flex;
    flex-direction: row;
    border: solid #D3D8E0 1px; 
    margin-bottom: 0px;
    border-radius: 8px;
    /* 新增：溢出内容按圆角裁剪，直接消除边角漏缝 */
    overflow: hidden;
    /* 新增：子元素垂直居中对齐，避免上下错位 */
    align-items: center;
    box-sizing: border-box;
    /* 可选：左侧加内边距避免邮箱输入框文字贴边，不需要可删除 */
    padding: 0 0 0 12px;
}

input[type="email"] {
    flex-grow: 2;
    margin: 0px;
    /* 调整：加左右内边距避免输入文字贴边，不需要可改回0 */
    padding: 0 8px;
    width: 100%;
    border: none;
    /* 新增：高度撑满父容器，消除上下空隙 */
    height: 100%;
}
input[type="submit"] {
    height: 44px;
    background: #0CB66E;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    /* 调整：配合父容器内边距，间距更均匀，不需要左侧留白可改回3px 3px 3px 0 */
    margin: 0 3px 0 auto;
}
input[type="email"]:focus {
    outline: none;
}

关键效果说明 #

核心生效配置是form元素的overflow: hidden，只要保留这一项，就可以直接裁剪掉超出form圆角范围的内容，完全消除边角露出的间隙，其余配置都是为了输入框显示更美观，可根据实际需求调整。

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