时间戳

首页 > 解决方案 > 减少边距并下推下面的内容

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

问题描述

当链接保持关闭时，它有一个非常大的底部边距。我需要减少边距并在向下滑动时将内容向下推。

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

标签： cssmargin

解决方案

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

推荐阅读