0

Подскажите как убрать margin-right у последнего элемента(иконка facebook)? Пример кода:

footer {
  height: 12.5rem;
  background-color: #fff;
  padding: 4.3rem 0;
  /* border-radius:0.9rem; */
  padding: 0 1rem;
}

.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.footer__col {
  width: 25%;
  padding: 3rem 0 0 0;
}

.footer__col ul li:not(:last-child) {
  margin-bottom: 1.9rem;
}

.footer__col ul li a {
  font-size: 1rem;
  text-transform: capitalize;
  font-weight: 500;
  display: block;
  color: rgb(128, 127, 128);
  transition: all 0.5s ease;
}

.footer__col ul li a:hover {
  color: #0046FF;
  padding-left: 0.5rem;
}

.footer__col a img {
  width: 30px;
  height: 30px;
  margin: 0 40px 0 0;
  transition: all 0.5s ease;
}

.footer__col a img:hover {
  transform: scale(1.5);
  transition: all 0.5s ease;
}

.footer__social-links {
  display: flex;
  justify-content: flex-end;
}

.links a:last-child {
  margin-right: 0;
  background-color: red;
  /* тест  */
}
<footer class="footer">
  <div class="row container">

    <div class="footer__links footer__col"></div>

    <div class="footer__links footer__col">
      <div class="footer__social-links links">
        <a href=""><img src="https://img.icons8.com/fluency/344/pinterest.png" alt="I"></a>
        <a href=""><img src="https://img.icons8.com/plasticine/2x/instagram-new--v2.png" alt="T"></a>
        <a href=""><img src="https://img.icons8.com/color/2x/twitter.png" alt="D"></a>
        <a href=""><img src="https://img.icons8.com/color/2x/facebook.png" alt="F"></a>
      </div>
    </div>

  </div>
</footer>

0

2 ответа 2

0

Вариантов есть несколько, но я обычно использую :not(:last-child), такая комбинация выдаёт стили всем элементам кроме последнего.

footer {
  height: 12.5rem;
  background-color: #fff;
  padding: 4.3rem 0;
  /* border-radius:0.9rem; */
  padding: 0 1rem;
}

.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.footer__col {
  width: 25%;
  padding: 3rem 0 0 0;
}

.footer__col ul li:not(:last-child) {
  margin-bottom: 1.9rem;
}

.footer__col ul li a {
  font-size: 1rem;
  text-transform: capitalize;
  font-weight: 500;
  display: block;
  color: rgb(128, 127, 128);
  transition: all 0.5s ease;
}

.footer__col ul li a:hover {
  color: #0046FF;
  padding-left: 0.5rem;
}

.footer__col a img {
  width: 30px;
  height: 30px;
  transition: all 0.5s ease;
}

.footer__col a img:hover {
  transform: scale(1.5);
  transition: all 0.5s ease;
}

.footer__social-links {
  display: flex;
  justify-content: flex-end;
}

.links a:not(:last-child) {
  margin-right: 40px;
}
<footer class="footer">
  <div class="row container">
    <div class="footer__links footer__col"></div>
    <div class="footer__links footer__col">
      <div class="footer__social-links links">
        <a href=""><img src="https://img.icons8.com/fluency/344/pinterest.png" alt="I"></a>
        <a href=""><img src="https://img.icons8.com/plasticine/2x/instagram-new--v2.png" alt="T"></a>
        <a href=""><img src="https://img.icons8.com/color/2x/twitter.png" alt="D"></a>
        <a href=""><img src="https://img.icons8.com/color/2x/facebook.png" alt="F"></a>
      </div>
    </div>
  </div>
</footer>

4
  • Спасибо за ответ. Но ваш вариант не работает. Именно на последнем элементе margin-right не сработал...
    – Kevlar
    1 июн 2022 в 12:16
  • @Kevlar, если через девтул посмотрите сниппет моего ответа, то увидите, что всё работает, мне не известно как вы применяли данный код в своём коде, уверен, что где-то что-то лишнее выдаёт margin-right на последний элемент.
    – De.Minov
    1 июн 2022 в 13:18
  • Да у меня выше был прописан margin и он не перебивался last-child ом, но проблема решена, спасибо вам за помощь!
    – Kevlar
    1 июн 2022 в 13:26
  • @Kevlar, ну вот, пожалуйста. Если мой ответ вам помог, отметьте его галочкой (слева, под рейтингом ответа)
    – De.Minov
    1 июн 2022 в 13:28
0

Проблема была в footer__col a img у которого было значение margin: 0 40px 0 0; я поменял правое значение с 40px на 0, а левое значение с 0 на 40px. И теперь проблема решена. Всем спасибо.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.