input does not follow line-height property

Question

I am currently having an issue with the line-height property. At present, I am using this in order to make the text appear below the middle (~ 2/3 of the way down the div).

.squ {
  height: 30vw;
  width: 40vw;
  background: gray;
  display: inline-block;
  margin: 5px;
  position: relative;
}
.jbcol3 {
  text-align: center;
  height: auto;
}
.squ input,
.squ a {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  line-height: 40vw;
}

<div class="jbcol3">
  <!--Start Grey Box-->
  <br />
  <h3>Account Actions</h3>

  <div id="">
    <p class="squ">
      <input type="submit" value="Make Payment" id="" />
    </p>
  </div>
  <p class="squ">
    <input type="submit" value="Get Quote" id="" />
  </p>
  <p class="squ"> <a id="" href="orderhistory.aspx">Order history</a>
  </p>
  <p class="squ"> <a id="" href="changepassword.aspx">Change password</a>
  </p>
</div>

As you can see from the snippet, I am using positioning and inline-block elements in order to achieve this kind of result.

However, the

<input type="submit"/> 

doesn't seem to adhere to the line-height property.

Is this by design that the button doesn't alter its line height, even though it should be overwritten?

---

I have found that setting background to transparent seems to 'remove' this limitation - and hence my question:

working demo:

.squ{
    height:30vw;
    width:40vw;
    background:gray;
    display:inline-block;
    margin:5px;
    position:relative;
}

.jbcol3{
    text-align:center;
    height:auto;
}

.squ input, .squ a{
    display:inline-block;
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    line-height:40vw;
    background:transparent;
}

<div class="jbcol3">
    <!--Start Grey Box-->
    <br />
     <h3>Account Actions</h3>

    <div id="">
        <p class="squ">
            <input type="submit" value="Make Payment" id=""/>
        </p>
    </div>
    <p class="squ">
        <input type="submit" value="Get Quote" id="" />
    </p>
    <p class="squ"> <a id="" href="orderhistory.aspx">Order history</a>
    </p>
        <p class="squ"> <a id="" href="changepassword.aspx">Change password</a>
    </p>
</div>

---

It has also been noted that setting -webkit-appearance: none; will also remove this behaviour - so it would suggest that this is default behaviour in which you have to override other properties in order for this to be shown?

---

Why is it that setting a background color allows the button to use this line height? why does this not work automatically?

Answer 1

Not sure if this will answer your question of why it happens.

But after a little and fast investigation I've came up with some results.

First, if the input has the type submit it gains the -webkit-appearance: push-button. And the line-height is forced to normal. And when I say forced it's really forced to normal.

In the computed styles you get:

line-height: normal;
.squ button, .squ input, .squ a - 40vw!important
input[type="submit"] - 40vw!important
input, textarea, keygen, select, button - normal user agent stylesheet

Even though I am overwriting it with 40vw!important it renders as normal. I even tried with 40px!important. normal is related to the font-size .. so I tried to cover that by changing the font-size and nothing would happen.

Now, if we remove the -webkit-appearance: push-button by overwriting with none it loses the forced line-height: normal.

But what happens when you change the background-color ? The browser by default places the -webkit-appearance with none allowing you to overwrite the line-height.

The line-height is forced by the browser in the push-button appearance. So, lets try this with a button tag instead.

<button type="submit">Make Payment</button>

What do we get?

-webkit-appearance: button;
line-height: 334.799987792969px;

Conclusions:

• -webkit-appearance: push-button makes the browser force the
  line-height: normal.
• -webkit-appearance: button allows to edit the line-height.
• background-color sets -webkit-appearance to none

Don't know if it's the answer you wanted but I think this results are quite interesting.