减少边距并下推下面的内容

Question

当 link 保持关闭时，它的底边距非常大。我需要减少边距并在下拉时将内容下推到下方。

#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 中不可见时，这并不意味着它们没有使用它们的 space。 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.

中采用 space

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

减少边距并下推下面的内容

Decrease the margin and push down content below

css

margin