为什么填充不能平等地应用于两个元素？答案

【问题标题】：Why is padding not applying equally on two elements?为什么填充不能平等地应用于两个元素？
【发布时间】：2016-12-24 14:22:12
【问题描述】：

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

这是小提琴——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>

【问题讨论】：

标签： html css button hyperlink padding

【解决方案1】：

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

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

因此，解决方案是

.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 的差异。可能是输入的值被放置在一个内部包装器中。您可以指定 height 来解决此问题。

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

【讨论】：

【解决方案2】：

您需要将line-height 更改为 1。

【讨论】：

【解决方案3】：

两个按钮中的所有样式都位于btn。但是，在您的一个按钮中，您的 btn 在 href 标记内被寻址并且没有被点击。

我会继续你的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>

如果您碰巧需要其他类，那么只需将其设置为

<span class="buttonContainer btn">

这应该可以解决问题。

【讨论】：