Why is padding not applying equally on two elements? - html

Question

I want to apply the same class to two different elements and am noticing that the padding surrounding each element (or at least their heights) is different.
Here is the fiddle -- https://jsfiddle.net/v9vnru0j/1/ . How do I make both elements the same height (which I interpret to be having the padding apply equally to both)?
.btn {
font-family: "Montserrat", "HelveticaNeue", "Helvetica Neue", sans-serif;
font-weight: 400;
font-style: normal;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 12px 20px;
font-size: 0.8125em;
text-rendering: optimizeLegibility;
max-width: 100%;
margin: 0;
line-height: 1.42;
text-decoration: none;
text-align: center;
vertical-align: middle;
white-space: normal;
border: 1px solid transparent;
-moz-user-select: none;
-moz-appearance: none;
border-radius: 0;
background-color: #1c1d1d;
color: #fff;
text-indent: 0rem;
}
<span class="buttonContainer"><a class="btn" data-no-turbolink="true" href="/my_objects/index">Cancel</a></span>
<span class="buttonContainer"><input type="submit" name="commit" value="Save" method="put" class="btn"></span>

Answer 1

That's because both links and inputs are inline by default.
However, inputs are replaced elements, and that makes them behave closer to inline-blocks.
Therefore, the solution is
.btn {
display: inline-block;
}
.btn {
display: inline-block;
font-family: "Montserrat","HelveticaNeue","Helvetica Neue",sans-serif;
font-weight: 400;
font-style: normal;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 12px 20px;
font-size: 0.8125em;
text-rendering: optimizeLegibility;
max-width: 100%;
margin: 0;
line-height: 1.42;
text-decoration: none;
text-align: center;
vertical-align: middle;
white-space: normal;
border: 1px solid transparent;
-moz-user-select: none;
-moz-appearance: none;
border-radius: 0;
background-color: #1c1d1d;
color: #fff;
text-indent: 0rem;
}
.buttonContainer *:hover {
margin: 0 0 0px 0;
text-rendering: optimizeLegibility;
cursor: pointer;
background-color: silver;
}
<span class="buttonContainer"><a class="btn" data-no-turbolink="true" href="/my_objects/index">Cancel</a></span>
<span class="buttonContainer"><input type="submit" name="commit" value="Save" method="put" class="btn"></span>
But on Firefox there is still a 2px difference. It might be that the value of the input is placed inside an inner wrapper. You can specify a height to fix this.
.btn {
display: inline-block;
height: 1.42em; /* Same as line-height */
box-sizing: content-box;
}
.btn {
display: inline-block;
height: 1.42em;
box-sizing: content-box;
font-family: "Montserrat","HelveticaNeue","Helvetica Neue",sans-serif;
font-weight: 400;
font-style: normal;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 12px 20px;
font-size: 0.8125em;
text-rendering: optimizeLegibility;
max-width: 100%;
margin: 0;
line-height: 1.42;
text-decoration: none;
text-align: center;
vertical-align: middle;
white-space: normal;
border: 1px solid transparent;
-moz-user-select: none;
-moz-appearance: none;
border-radius: 0;
background-color: #1c1d1d;
color: #fff;
text-indent: 0rem;
}
.buttonContainer *:hover {
margin: 0 0 0px 0;
text-rendering: optimizeLegibility;
cursor: pointer;
background-color: silver;
}
<span class="buttonContainer"><a class="btn" data-no-turbolink="true" href="/my_objects/index">Cancel</a></span>
<span class="buttonContainer"><input type="submit" name="commit" value="Save" method="put" class="btn"></span>

Answer 2

All of the styling that you have in your two buttons is at btn. However in one of your buttons your btn is being addressed inside an href tag and is not being hit.
I would go on your html
<span class="btn"><a data-no-turbolink="true" href="/my_objects/index">Cancel</a></span>
<span class="btn"><input type="submit" name="commit" value="Save" method="put"></span>
If you happen to need that other class, then just set it as
<span class="buttonContainer btn">
That should do the trick.

Answer 3

You need to change line-height to 1.