Различный интервал для якорных и заголовочных меток на вертикальной оси

Question

Я пытаюсь создать нижний колонтитул для своего сайта с помощью Flexbox. Есть два столбца, каждый с одинаковым количеством элементов, за исключением того, что один столбец заполняется текстом в тегах <h4> и другими ссылками в тегах <a>. Они по-разному расположены на вертикальной оси, и я не могу понять, почему. Я добавил некоторые цвета фона для ясности.

.footer {
  font-family: 'nexa_light', sans-serif;
  font-style: normal;
  background-color: #003152;
  color: white;
}

.footer-container {
  background-color: red;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 25px;
  padding-left: 30px;
}

.foot-section {
  background-color: blue;
  margin-bottom: 15px;
}

.foot-content {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-end;
}

.foot-section a {
  /*links*/
  color: white;
}

.footer-container>h5 {
  /*Copyright*/
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  font-size: 15px;
}

@media (min-width: 992px) {
  .foot-section h2 {
    font-size: 20px;
  }
  .foot-section a,
  .foot-section h4 {
    font-size: 15px;
  }
}

<div class="container-fluid footer">
  <div class="footer-container row">
    <div class="col-sm-3 foot-section">
      <div class="foot-content">
        <h2><strong>Company</strong></h2>
        <h4>London, UK</h4>
        <h4>Logo by X</h4>
        <h4>Something else</h4>
      </div>
    </div>
    <div class="col-sm-3 foot-section">
      <div class="foot-content">
        <h2><strong>Quick Links</strong></h2>
        <a href="#">Home</a>
        <a href="#">Products</a>
        <a href="#">News & Reviews</a>
      </div>
    </div>
    <div class="col-sm-6 foot-section">
      <div class="foot-content">
        <h2><strong>Contact</strong></h2>
      </div>
    </div>
    <h5>Copyright © X Ltd 2020, All Rights Reserved. |</h5><a href="#"> Privacy Policy</a>
  </div>
</div>

Answer 1

Заголовочные элементы (такие как h4), как правило, имеют верхние и нижние поля, установленные в таблицы стилей по умолчанию для браузера .

Эти поля не применяются к элементам привязки (a).

Вот стили, примененные к h4 элементам в Chrome:

Вы можете видеть, что верхнее и нижнее поля 1.33em.

• "block-start" - верх в режиме горизонтальной записи.
• «inline-start» - это сторона, с которой начинается текст. Это левая сторона в LTR.
• «- end» относится к противоположной стороне.
• source: § 6.2. Относительные по потоку направления

Вам просто нужно переопределить значения по умолчанию. Добавьте это к своему коду: h4 { margin: 0; }.

  /* NEW */

.foot-section h4 {
  margin: 0;
}

.footer {
  font-family: 'nexa_light', sans-serif;
  font-style: normal;
  background-color: #003152;
  color: white;
}

.footer-container {
  background-color: red;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 25px;
  padding-left: 30px;
}

.foot-section {
  background-color: blue;
  margin-bottom: 15px;
}

.foot-content {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-end;
}

.foot-section a {
  /*links*/
  color: white;
}

.footer-container>h5 {
  /*Copyright*/
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  font-size: 15px;
}

@media (min-width: 992px) {
  .foot-section h2 {
    font-size: 20px;
  }
  .foot-section a,
  .foot-section h4 {
    font-size: 15px;
  }

<div class="container-fluid footer">
  <div class="footer-container row">
    <div class="col-sm-3 foot-section">
      <div class="foot-content">
        <h2><strong>Company</strong></h2>
        <h4>London, UK</h4>
        <h4>Logo by X</h4>
        <h4>Something else</h4>
      </div>
    </div>
    <div class="col-sm-3 foot-section">
      <div class="foot-content">
        <h2><strong>Quick Links</strong></h2>
        <a href="#">Home</a>
        <a href="#">Products</a>
        <a href="#">News & Reviews</a>
      </div>
    </div>
    <div class="col-sm-6 foot-section">
      <div class="foot-content">
        <h2><strong>Contact</strong></h2>
      </div>
    </div>
    <h5>Copyright © X Ltd 2020, All Rights Reserved. |</h5><a href="#"> Privacy Policy</a>
  </div>
</div>