时间戳

首页 > 解决方案 > 如何删除弹出式覆盖和链接中的额外空白

html - 如何删除弹出式覆盖和链接中的额外空白

问题描述

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

我为链接和覆盖添加了边框，以帮助您可视化问题。

我尝试将链接和覆盖设置为内联块。

* {
  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'）类顶部/底部的额外空白。我希望叠加层的位置保持相对于被单击的链接。

标签： htmlcss

解决方案

尝试将所有内容放在 html<table>中。这应该保持两个框内联；

推荐阅读