Remove HTML form submit button padding-like vertical space - html

Question

I have a problem with HTML forms.
#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>
Despite the fact, that I have removed all the margins and paddings for a submit button, it still has a padding-like VERTICAL spacing:
Why is that so, and how could I remove this spacing?

Answer 1

In fact there are TWO issues here...
The horizontal spacing is cause by whitespace in the HTML which affects inline/inline-block elements.
That subject is covered extensively in How to remove the space between inline-block elements?
The second issue is the disparity in the sizes of the two inputs.
This is caused by the fact the the two input types have different box-sizing default properties.
So we apply an overriding default reset:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
and a solution to the whitespace (here I used floats and a quick overflow 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

you have two problem.
1. positioning of element and
2. box-sizing problem.
add the two line of code in the respective section of your css code as shown below.
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
}
Learn about box-sizing here: https://css-tricks.com/box-sizing/
Learn about float here: https://developer.mozilla.org/en/docs/Web/CSS/float