修复 CSS 盒子的空白部分。

huangapple go评论57阅读模式
英文:

Fixing the whitespace of a css box

问题

我尝试修复弹出框,当单击项目时会出现弹出框(这是用于演示餐厅网站的),其中内部内容设置为640像素。然而,该框周围有很多空白,我似乎无法弄清楚如何去除。

这里是创建弹出框的代码:

.popup {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 100;
  bottom: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
  /*overflow-x: hidden;*/
  transition: 0.3s;
}

.popup-content {
  position: relative;
  top: 20%;
  width: 100%;
  padding-right: 36px;
  margin-top: 2px;
  text-align: center;
}

.popup a {
  padding: 0px;  
  max-width: 700px;
  text-decoration: none;
  font-size: 36px;
  color: #000000;
  display: block;
}

我一直在尝试解决这个问题,但无法弄清楚实际框的大小是在哪里设定的。

英文:

I was trying to fix a popup box that appears when an item is clicked (this is for a demo restaurant site), which has inner content set to 640px. However, the box has a lot of whitespace around it that I cannot seem to figure out how to remove.

Here's the code to create the popup box:

.popup {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 100;
  bottom: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
  /*overflow-x: hidden;*/
  transition: 0.3s;
}

.popup-content {
  position: relative;
  top: 20%;
  width: 100%;
  padding-right: 36px;
  margin-top: 2px;
  text-align: center;
}

.popup a {
  padding: 0px;  
  max-width: 700px;
  text-decoration: none;
  font-size: 36px;
  color: #000000;
  display: block;
}

I've been poking around this for a bit but cannot figure out where the sizing of the actual box comes in.

答案1

得分: 0

代码部分不需要翻译,以下是翻译好的内容:

似乎问题可能出在.popup-content类的top属性上。它被设置为top: 20%;,这意味着弹出内容将从其容器的顶部位置__20%__。这可能导致您遇到的空白。

尝试这种方法

  • .popup-content类中的top属性更改为top: 0;
.popup-content {
  position: relative;
  top: 0;
  width: 100%;
  padding-right: 36px;
  margin-top: 2px;
  text-align: center;
}
  • 使用padding属性来设置弹出框内部的间距:
.popup-content {
  /* 其他属性 */
  padding: 20px;  /* 或您需要的值 */
}
英文:

It seems that the issue might be with the top property of the .popup-content class. It's set to top: 20%;, which means that popup content will be positioned 20% from the top of its container. This might cause the whitespace you're experiencing.

Try this approach

  • Change the top property in the .popup-content class to top: 0;:
.popup-content {
  position: relative;
  top: 0;
  width: 100%;
  padding-right: 36px;
  margin-top: 2px;
  text-align: center;
}
  • use padding property for spacing inside the popup box:
.popup-content {
  /* Other properties */
  padding: 20px;  /* or the value you need*/
}

huangapple
  • 本文由 发表于 2023年6月6日 00:45:37
  • 转载请务必保留本文链接:https://go.coder-hub.com/76408468.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定