html - 为什么填充不同样适用于两个元素？

Question

我想将同一个类应用于两个不同的元素，我注意到每个元素周围的填充(或至少它们的高度)是不同的。

这是 fiddle -- https://jsfiddle.net/v9vnru0j/1/ .如何使两个元素具有相同的高度(我将其解释为对两者同样应用填充)？

.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

这是因为默认情况下链接和输入都是内联。

但是，输入是替换元素，这使得它们的行为更接近于 inline-block。

因此，解决方案是

.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>

但在 Firefox 上仍然存在 2px 的差异。可能是输入的值被放置在内部包装器中。您可以指定一个高度来解决这个问题。

.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>