带边框的form表单内部元素出现无法消除的多余间距如何解决

解决方案 #

这个间距是浏览器默认样式差异导致的：你的input没有显式设置上下内边距，浏览器默认的上下padding远小于按钮的10px上下padding，同时flex布局下输入框作为替换元素不会默认拉伸占满表单高度，因此出现多余留白。

你可以通过以下修改解决：

• 先添加全局样式重置，统一盒模型，清除浏览器默认的内外边距差异
• 给input设置和按钮一致的上下内边距，或显式指定flex子元素拉伸占满父容器高度
• 可选：显式设置input的display: block避免部分浏览器的行内块默认样式带来的间距

修改后的完整CSS代码如下：

/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
main {
  display: flex;
  height: 100vh;
  width: 100vw;
  justify-content: center;
  align-items: center;
}
main form {
  display: flex;
  border: 2px solid green;
  align-items: stretch; /* 显式指定子元素拉伸占满高度 */
}
main form .btndep {
  display: block;
  padding: 10px;
  background: green;
  border: 0;
  box-shadow: none;
  outline: none;
}
main form input {
  border: 0;
  outline: none;
  box-shadow: none;
  text-align: right;
  padding: 10px 5px; /* 上下padding和按钮一致，左右保持5px */
  display: block;
}

如果你不需要修改input的左右内边距，也可以单独给input加height: 100%属性，同样可以消除上下的多余间距。

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