减少保证金并下推内容

Question

当链接保持关闭时，它具有非常大的底部边距。我需要减少保证金并按下滑落下方的内容。

#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>

Answer 1

当你的元素在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>