删除HTML表单提交按钮填充式垂直空间

Question

我的HTML表单有问题。

#subscription {
  display: block;
  margin: auto;
  background-color: blue;
  width: 550px;
  height: auto;
}
form#subscription input#subscription-text {
  width: 200px;
  height: 30px;
  background: orange;
  border-style: none;
}
form#subscription input#subscription-submit {
  width: 200px;
  height: 30px;
  background-color: rgb(208, 225, 125);
  border-style: none;
  padding: 0;
  margin: 0;
}

<form id="subscription" action="subscription">
  <input id="subscription-text" type="text" placeholder="INPUT">
  <input id="subscription-submit" type="submit" value="SUBMIT">
</form>

尽管我已经删除了提交按钮的所有边距和填充，但它仍然具有类似填充的VERTICAL间距：

为什么会这样，我怎么能删除这个间距？

Answer 1

事实上这里有两个问题......

水平间距是由HTML中的空格引起的，它影响内联/内联块元素。

How to remove the space between inline-block elements?

中广泛涵盖 主题

第二个问题是两个输入的大小差异。

这是因为两种输入类型具有不同的 box-sizing默认属性。

因此我们应用覆盖默认重置：

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

和空白的解决方案（这里我使用了浮点数和快速溢出clearfix）

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
form#subscription {
  display: block;
  margin: auto;
  background-color: blue;
  width: 550px;
  overflow: auto;
}
form#subscription input#subscription-text {
  width: 200px;
  height: 30px;
  background: orange;
  border-style: none;
  float: left;
}
form#subscription input#subscription-submit {
  width: 200px;
  height: 30px;
  background-color: rgb(208, 225, 125);
  border-style: none;
  float: left;
}

<form id="subscription" action="subscription">
  <input id="subscription-text" type="text" placeholder="INPUT">
  <input id="subscription-submit" type="submit" value="SUBMIT">
</form>

Answer 2

你有两个问题。 元素和元素的定位 2.盒子大小问题。

在css代码的相应部分添加两行代码，如下所示。

form#subscription input#subscription-text {
    width: 200px;
    height: 30px;
    background: orange;
    border-style: none;
    float: left;               // this line solves prob-1
    box-sizing: border-box;    // this line solves prob-2
}

在此处了解大小调整框架：https://css-tricks.com/box-sizing/

了解浮动在这里：https://developer.mozilla.org/en/docs/Web/CSS/float