Mike Mike - 3 months ago 10
CSS Question

Why is padding not applying equally on two elements?

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

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>