1

Подскажите пожалуйста, как убрать висячий внешний отступ? У меня есть два блока (.main__form и .main__item). Второй (.main__item) из этих двух блоков скрыт с помощью display: none, но почему-то у первого (.main__form) все равно появляется нижний внешний отступ. Если удалить из кода скрытый блок, то и внешний отступ пропадает. Как быть? Просто, я хочу чтобы отступ появлялся тогда, когда второй блок был видимым, а не просто так висел.

Скрин

2
  • добавьте html и css 2 ноя 2022 в 21:53
  • Потому что display на :not не влияет. Нода есть, значит элемент не последний, значит класс отработает. 2 ноя 2022 в 22:12

1 ответ 1

1

Ваша проблема, не совсем там где вы ищите, хотя на скрине, она присутствует

введите сюда описание изображения

Что в переводе на человеческий - нижний внешний отступ у main_form которая не является последним дочерним элементом, т.е. ровно Ваша ситуация.

Я предлагаю если блоков всегда 2, то добавлять верхний отступ к нижнему, тогда он будет появляться вместе с блоком и исчезать с ним же.

.main__form:not(:last-child){
  margin-bottom: 0; /* можно убрать снизу */
}

.main__item{
  margin-top: 30px; /* можно добавить свеху */
  /*display: none*/
}
<div>
  <form class="main__form">
    <button>Ok</button>
  </form>
  <form class="main__item">
    <button>Ok</button>
  </form>
</div>

5
  • А ответ то в чём состоит? Это больше раздутый комментарий) 2 ноя 2022 в 22:21
  • Спасибо, за конструктив, добавил свое виденье решения. 2 ноя 2022 в 22:37
  • @DaniilLoban, да спасибо) Что-то сразу в голову не пришло) 2 ноя 2022 в 22:40
  • @НикитаГребенкин пожалуйста, что делать с ответами 2 ноя 2022 в 22:43
  • @DaniilLoban Да, теперь это нормальный ответ 👍 3 ноя 2022 в 8:17

Ваш ответ

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

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