Почему размер кнопки внутри формы и снаружи кнопки разный после того же стиля?

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 (в section-info__nav доступно 44px, поэтому высота каждой кнопки с дисплеем 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 по умолчанию, вы должны добавить указанный атрибут c line-height к вашему классу .btn, чтобы выровнять все ваши элементы правильно.

Как это исправить?

Просто добавьте флекс-дисплей к вашей форме, например так:

form {
  display: flex;
}

Answer 2

потому что ваша форма не является гибкой. Вы просто должны добавить ниже код в вашей форме css:

display: flex;