html - 如何删除弹出窗口覆盖和链接中的多余空白

Question

我正在尝试创建一个相对于被单击的链接定位的弹出窗口。我的代码目前执行此操作，但在触发弹出窗口的链接和叠加层本身的顶部/底部都有额外的空白。我想删除这个多余的空白区域。

我已经为链接和叠加层添加了边框，以帮助您直观地看到问题。

我试过将链接和覆盖设置为内联 block 。

* {
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  margin-top: 200px;
}

.box {
  border: 1px solid black;
}

.overlay {
  position: relative;
  top: -20px;
  left: 20px;
  border: 1px solid red;
  visibility: hidden;
  opacity: 0;
}

.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #dff9fb;
  border-radius: 5px;
  width: 100%;
  position: relative;
}

.close {
  position: absolute;
  top: 16px;
  right: 30px;
}

<div class="box">
  <a class="button" href="#popup1">Let me Pop up</a>
</div>

<div id="popup1" class="overlay">
  <div class="popup">
    <h2>Endling #1</h2>
    <iframe width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/648742508&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
    <a class="close" href="#">&times;</a>
  </div>
</div>

我想删除链接('box' 类)和覆盖('overlay')类顶部/底部的额外空白。我希望叠加层的定位保持相对于被点击的链接。

Answer 1

您正在使用 flex 来对齐您的元素，默认情况下，子元素将尝试增长到父元素(flex 容器)的高度和宽度。

为了克服这个问题，您可以使用 justify-content 来控制水平空间的分布方式(您已经在使用它)和 align-items 来垂直控制间距(对于 .box 元素，您需要这个以使其具有原始大小)。

此外，您还为 top 和 bottom margin 指定了 75px，这导致了间距在 .overlay 元素中。

There is a margin-top of 200px set on the body that causes a scroll, it is still there in the following snippet as I think it is not related with you issue.

所以，这是您尝试的修订版:

* {
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  /** add this so the .box div doesn't grow to it's parent height **/
  margin-top: 200px;
}

.box {
  border: 1px solid black;
}

.overlay {
  position: relative;
  top: -20px;
  left: 20px;
  border: 1px solid red;
  visibility: hidden;
  opacity: 0;
}

.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 0 auto;
  /** removed 75px that caused the top and bottom spacing  **/
  padding: 20px;
  background: #dff9fb;
  border-radius: 5px;
  width: 100%;
  position: relative;
}

.close {
  position: absolute;
  top: 16px;
  right: 30px;
}

<div class="box">
  <a class="button" href="#popup1">Let me Pop up</a>
</div>

<div id="popup1" class="overlay">
  <div class="popup">
    <h2>Endling #1</h2>
    <iframe width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/648742508&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
    <a class="close" href="#">&times;</a>
  </div>
</div>

Learn more about flexbox.

希望我能进一步插入你。