Уменьшите маржу и опустите контент ниже - PullRequest
Новая
       7

Уменьшите маржу и опустите контент ниже

0 голосов
/ 01 марта 2019

Когда ссылка остается закрытой, у нее очень большое нижнее поле.Мне нужно уменьшить наценку и опустить содержание ниже на слайде.

#menu-toggle2 {
  display: none;
}

#collapse-menu2 {
  transition: transform 0.3s;
  transform-origin: top;
}

input:not(:checked)~#collapse-menu2 {
  transform: scaleY(0);
}

.pinkdok {
  color: #FF4870;
  cursor: pointer;
}
<h4>Архив прошлых уведомлений</h4>
<input id="menu-toggle2" type="checkbox">
<label id="menu-label" for="menu-toggle2">
  <h6 class="pinkdok">Подробнее</h6>
</label>
<ul id="collapse-menu2">
  <li>Должники на 01.01.2019<br>
    <a class="pinkdok" href="https://domain.ru/wp-content/uploads/2019/02/Dolgi01012019g.xls.pdf" target="_blank" rel="noopener noreferrer">Скачать документ (.pdf)</a></li>
</ul>

1 Ответ

0 голосов
/ 01 марта 2019

Когда ваши элементы не видны в DOM, это не значит, что они не занимают свое место.Элемент UL все еще имел некоторую высоту.Хотя это быстрое решение.Это поможет вам двигаться вперед.

Например, этот CSS: 

opacity: 0; /* The element is invisible, but still takes space */
---
display: none; /* The element is invisible, and won't take any space */

В вашем примере вы использовали scaleY(), но элемент все равно будет занимать свое место в DOM. 

#menu-toggle2 {
  display: none;
}

#collapse-menu2 {
  transition: transform 0.3s;
  transform-origin: top;
  height: auto;  /* added to example */
}

input:not(:checked)~#collapse-menu2 {
  transform: scaleY(0);
  height: 0; /* added to example */
}

.pinkdok {
  color: #FF4870;
  cursor: pointer;
}


/* Not question related */

p {
  margin: 0;
}
<h4>Архив прошлых уведомлений</h4>
<input id="menu-toggle2" type="checkbox">
<label id="menu-label" for="menu-toggle2">
  <h6 class="pinkdok">Подробнее</h6>
</label>
<ul id="collapse-menu2">
  <li>Должники на 01.01.2019<br>
    <a class="pinkdok" href="https://gbu-chs.ru/wp-content/uploads/2019/02/Dolgi01012019g.xls.pdf" target="_blank" rel="noopener noreferrer">Скачать документ (.pdf)</a></li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elit nibh, suscipit placerat euismod et, interdum at metus. Cras sit amet hendrerit risus. Phasellus porttitor, eros vitae elementum consequat, leo enim varius nibh, sit amet ullamcorper massa
  lorem id magna. Aenean vel risus in ligula iaculis facilisis. Curabitur ut feugiat nulla, ac bibendum odio. Suspendisse dignissim ligula vel diam condimentum aliquam. Etiam tincidunt eleifend nisi eget feugiat. Donec ligula lorem, dignissim vitae varius
  quis, pulvinar vel nibh. In hac habitasse platea dictumst.</p>
...