为什么样式相同后，内页按钮和外页按钮的大小不一样？

Question

样式相同，但内页按钮和外页按钮的大小不一样。表单外按钮的文本内容周围有额外的填充。标签也有同样的问题。为什么会出现这种情况？如何解决这个问题？另外，按钮的用户代理样式表覆盖了我的字体。如何解决这个问题？

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body,
html {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  color: #333;
}

.container {
  margin: 30px auto;
  padding: 25px;
  border: 1.5px solid #e6e6e6;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.15);
  border-radius: 6px;
}

a {
  text-decoration: none;
}

.btn {
  background-color: #fff;
  font-size: 0.9em;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 5px;
}

.btn--orange {
  color: #e99d0f;
  border: 1px solid #e99d0f;
}

.btn--red {
  color: #ff2727;
  border: 1px solid #ff2727;
}

.section-info {
  width: 60%;
}

.section-info img {
  width: 100%;
  margin-top: 10px;
}

.section-info__nav {
  display: -webkit-box;
  display: flex;
  margin-top: 10px;
}

.section-info a {
  margin-right: 10px;
}

<section class="container section-info">
  <div class="section-info__nav">
    <a href="#" class="btn btn--orange">Edit</a>
    <button class="btn btn--red">Delete</button>
    <form action="#" method="POST">
      <button class="btn btn--red">Delete</button>
    </form>
  </div>
</section>

Answer 1

在第一眼看去，可能会有点混乱，但如果你多注意看一下样式继承，你会发现它们之间的一点区别。

让我们一步步来了解一下

我们可以看到，有 display: flex; 属性。

.section-info__nav {
  display: -webkit-box;
  display: flex;
  margin-top: 10px;
}

我们知道，flex只会影响到 div，所以这里我们得到了什么。

<a href="#" class="btn btn--orange">Edit</a>
<button class="btn btn--red">Delete</button>
<form action="#" method="POST">
  ...
</form>

有三个直系亲属的孩子 div (a, button, form). 的另一个按钮。form 不会生效的 flex 显示，因为表单本身得到了显示 block 默认情况下。

为什么会出现这种情况呢？

我们知道 flex 在默认情况下，将拉伸内容，使其与默认的内容完全匹配。height (有 44px 可在 section-info__nav所以每个按钮高度与显示 flex 将是 44px). 但当我们得到一个 展示 block，所有项目都有这种 显示将以其正常的形式和大小放在文档中。，所以由于按钮类是。

.btn {
  background-color: #fff;
  font-size: 0.9em;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 5px;
}

的总和。padding, border和 font-size 将是 34px (10px 比实际可用高度低 div). 所以 button 将添加在div的开头，与其他按钮相比，它将看起来像一个哑巴。

注意事项 为了 挤占空间 在你 div 你可以 以此来控制他们 align-items 属性。但在你的特殊情况下。自从 <a> 没有默认 line-height 属性，你应该添加特定的 line-height 归于你的 .btn 类，以便正确排列所有项目。

如何解决这个问题？

只需在你的表单中添加flex显示，就像这样。

form {
  display: flex;
}

Answer 2

因为你的表单不是flex.你应该在你的表单css中添加以下代码。

display: flex;