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. И теперь проблема решена. Всем спасибо.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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