Как расстояние между строками в одной колонке в списке и расстояние между ссылками во второй колонке в списке сократить?

Question

Подскажите пожалуйста как расстояние между строками в одной колонке в списке и расстояние между ссылками во второй колонке в списке сократить?

Ссылка на JSFiddle

.footer {
  background-color: #1f1f1f;
  margin-top: 60px;
  margin-bottom: 40px;
  display: flex;
  min-height: 350px;
  position: relative;
}

.footer_columns {
  background-color: #1f1f1f;
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  color: white;
}

.footer_content_copyright {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-basis: 711px;
}

.footer_author {
  margin: 18px 18px;
  line-height: 25px;
  font-size: 18px;
  font-weight: normal;
  position: absolute;
  left: 49px;
  bottom: 0px;
}

.logo_place_footer {
  width: 183px;
  height: 35px;
  position: absolute;
  left: 64px;
  top: 30px;
}

.footer_column_content_info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 16px;
}

.footer_column_heading {
  line-height: 30px;
  font-size: 18px;
  font-weight: bolder;
}

.footer_column_content_links {
  line-height: 30px;
  font-size: 18px;
  font-weight: normal;
}

.footer_column_content_social {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 16px;
}

.footer_column_content_social-icon {
  color: white;
  text-decoration: none;
  line-height: 30px;
  font-size: 18px;
  margin-top: 20px;
  font-weight: normal;
}

.footer_column_content_social-icon_img {
  height: 16px;
  width: 16px;
}

<footer class="footer">
  <nav class="footer_columns">
    <ul class="footer_content_copyright">
      <li class="footer_author">
        <p>©&nbsp;2020. Иван Меркулов</p>
      </li>
      <li class="logo">
        <img class="logo logo_place_footer" src="imag/logo_place_header.svg" alt="Логотип Яндекса ">
      </li>
    </ul>

    <ul class="footer_column_content_info">
      <li>
        <h2 class="footer_column_heading"> О практикуме</h2>
      </li>
      <li class="footer_column_content_links">Главная
        <li>
          <li class="footer_column_content_links">Концепция
            <li>
              <li class="footer_column_content_links">Наставники</li>
    </ul>

    <ul class="footer_column_content_social">
      <li>
        <h2 class="footer_column_heading">Соцсети</h2>
      </li>
      <li>
        <a href="#" class="footer_column_content_social-icon">
          <img class="footer_column_content_social-icon_img" src="./imag/instagram_color_white.svg" alt="Инстаграм"> Instagram
        </a>
      </li>
      <li>
        <a href="#" class="footer_column_content_social-icon">
          <img class="footer_column_content_social-icon_img" src="./imag/facebook_color_white.svg" alt="Фейсбук"> facebook
        </a>
      </li>
      <li>
        <a href="#" class="footer_column_content_social-icon">
          <img class="footer_column_content_social-icon_img" src="./imag/vk_color_white.svg" alt="Вконтакте"> vk
        </a>
      </li>
    </ul>
  </nav>

</footer>

Answer 1

Вы применяете flex практически в каждом контейнере плюс глубина вложенности что и приводит увеличенному расстоянию.

Сделал более "легковесный" вариант что бы это продемонстрировать:

li {
  list-style-type: none;
}

.footer {
  width: 100%;
  background-color: #1f1f1f;
  padding: 60px 40px 40px;
}

.footer_columns {
  display: flex;
  justify-content: space-between;
  color: white;
  background-color: inherit;
}

.footer_columns > ul:first-of-type {
  padding: 0;
}

.footer_content_copyright {
  align-self: flex-end;
}

.footer_author {
  white-space: nowrap;
  line-height: 25px;
  font-size: 18px;
  font-weight: normal;
}

.footer_column_content_info {
  padding-bottom: 16px;
}

.footer_column_heading {
  white-space: nowrap;
  line-height: 30px;
  font-size: 18px;
  font-weight: bolder;
}

.footer_column_content_links {
  line-height: 30px;
  font-size: 18px;
  font-weight: normal;
}

.footer_column_content_social {
  padding-bottom: 16px;
}

.footer_column_content_social > a {
  display: block;
}

.footer_column_content_social-icon {
  color: white;
  text-decoration: none;
  line-height: 30px;
  font-size: 18px;
  margin-top: 20px;
  font-weight: normal;
}

<footer class="footer">
  <nav class="footer_columns">
    <ul class="footer_content_copyright">
      <li class="footer_author">©&nbsp;2020. Иван Меркулов</li>
    </ul>
    
    <ul class="footer_column_content_info">
      <li class="footer_column_heading"> О практикуме</li>
      <li class="footer_column_content_links">Главная</li>
      <li class="footer_column_content_links">Концепция</li>
      <li class="footer_column_content_links">Наставники</li>
    </ul>

    <ul class="footer_column_content_social">
      <li class="footer_column_heading">Соцсети</li>
      <a href="#" class="footer_column_content_social-icon"><img class="footer_column_content_social-icon_img" src="./imag/instagram_color_white.svg" alt="Инстаграм"> Instagram</a>
      <a href="#" class="footer_column_content_social-icon"><img class="footer_column_content_social-icon_img" src="./imag/facebook_color_white.svg" alt="Фейсбук"> facebook</a>
      <a href="#" class="footer_column_content_social-icon"><img class="footer_column_content_social-icon_img" src="./imag/vk_color_white.svg" alt="Вконтакте"> vk</a>
    </ul>
  </nav>
</footer>

БЛОГ НА HUSL

Как расстояние между строками в одной колонке в списке и расстояние между ссылками во второй колонке в списке сократить?

Ответы (1 шт):