Remove HTML form submit button padding-like vertical space

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?

you have given the width as 200px for the button (form#subscription input#subscription-submit) — pTi, Dec 26 '15 at 17:20
I used float:left on both the inputs and that worked for me. — Chris G, Dec 26 '15 at 17:52

score 3 · Accepted Answer · edited May 23 '17 at 12:04

3

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>

edited May 23 '17 at 12:04

Community

1
1

answered Dec 26 '15 at 17:41

Paulie_D

107,962
13
142
161

in my question I meant vertical spacing. But the code you provides helps to solve that also. Could you tell me a bit about box sizing defaults? Who are they? I am new in web development, my knowledge in CSS is limited. – Daumantas Versockas Dec 26 '15 at 17:50
There actually is no vertical *spacing*...the inputs are actually different sizes due to built-in padding etc. that is different for each element. You can read about the property [**here**](https://developer.mozilla.org/en/docs/Web/CSS/box-sizing) – Paulie_D Dec 26 '15 at 17:58
Thank you! This code has messed up some other HTML elements in my page, but, I think, I can handle it now, when I have something to carry on with. Thank you again! – Daumantas Versockas Dec 26 '15 at 18:06
Why this built in padding affect only text input? – Daumantas Versockas Dec 26 '15 at 18:17
That's just the way they are built...ain't web development grand? – Paulie_D Dec 26 '15 at 19:01

score 0 · Answer 2 · answered Dec 26 '15 at 18:07

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

Remove HTML form submit button padding-like vertical space

2 Answers2