CODEWITHSUNDEEP
htmlcss
m0bi5
m0bi5

Reputation: 9462

Why is a input box of type="submit" shorter than its given height?

As you can see here:

#hours {
  width: 120px;
  height: 80px;
}
#button {
  width: 120px;
  height: 80px;
}
<label class="hours">
  <input value="0" min="0" id="hours" />
</label>
<label>
  <input type="submit" value="Set Alarm" id="button" />
</label>

I have two input tags. One of it is of type="submit". Both the elements are given a height:80px but the submit button appears shorter than the text box.

Why is it so?

Upvotes: 0

Views: 99

Answers (4)

Vikas Kandari
Vikas Kandari

Reputation: 1851

        <label class="hours">
      <input value="0" min="0" id="hours" />
   </label>
      <label>
       <input type="submit" value="Set Alarm" id="button" />
           </label>

   <style>
     #hours {
           width: 120px;
           height: 80px;
           border: 1px solid;
            }
     #button{
           width: 120px;
           height: 80px;
           border: 0px none;
           margin-left: -5px;
            }
   </style>

Upvotes: 0

Viktor Maksimov
Viktor Maksimov

Reputation: 1465

It is happening because submit button has box-sizing: border-box to default. So in your case 80px height - 1px padding top - 1px padding bottom - 2px border top - 2px border bottom = 74px height. You can inspect your elements by pressing F12 or the right button of the mouse over the submit button and the clicking inspect element on Chrome. After that go to Computed and you will see the exact dimensions for paddings, margins, borders, width and height.

Upvotes: 1

Kristijan Iliev
Kristijan Iliev

Reputation: 4987

Try adding this css rule to your button:

box-sizing: content-box;

Try it in the snippet below:

#hours{
    width: 120px;
    height: 80px;
}
#button {
    width: 120px;
    height: 80px;
    box-sizing: content-box;
}
<label class="hours">
    <input value="0" min="0" id="hours" />
</label>
<label>
    <input type="submit" value="Set Alarm" id="button" />
</label>

More about box-sizing read here

Upvotes: 2

Akshay
Akshay

Reputation: 14348

That i think is because of the border,you can remove it by using box-sizing:border-box

#hours {
    width: 120px;
    height: 80px;
    box-sizing:border-box;
}
#button {
    width: 120px;
    height: 80px;
    line-height:0;
}
<label class="hours">
    <input type="number" value="0" min="0" id="hours" />
</label>
<label>
    <input type="submit" value="Set Alarm" id="button" />
</label>

Upvotes: 2

Related Questions