删除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中的空格引起的，它影响内联/内联块元素。

在如何删除内联块元素之间的空间中 广泛涉及该主题？

---

第二个问题是两个投入的规模差异。

这是由于两个输入类型具有不同的 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

你有两个问题。 1.元素的定位和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