CODEWITHSUNDEEP
htmlcssforms
Daumantas Versockas
Daumantas Versockas

Reputation: 777

Remove HTML form submit button padding-like vertical space

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:

enter image description here

Why is that so, and how could I remove this spacing?

Upvotes: 1

Views: 1307

Answers (2)

Sajib Biswas
Sajib Biswas

Reputation: 463

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

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 115011

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>

Upvotes: 3

Related Questions