天气APP静态页面超大文本容器适配问题求助

你遇到的核心问题是大字号文本的容器（.p-wrapper 和 <p>）因字体默认行高、元素外边距以及字体本身的字形空间，导致容器高度远大于实际文字高度，破坏了second-section的居中视觉效果。以下是直接有效的解决方案：

核心修改步骤 #

1. 移除<p>元素的默认外边距 #

浏览器默认给<p>标签设置了上下margin，大字号下这个间距会被放大，直接清除：

.second-section .p-wrapper p {
  font-size: 300pt;
  font-weight: 500;
  margin: 0; /* 移除默认外边距 */
}

2. 精准控制行高，贴合字体高度 #

大字号的默认行高（line-height）通常会给文字上下留出多余空间，设置line-height: 1可以让行高紧贴文字，部分字体可能需要微调（比如0.9）：

.second-section .p-wrapper p {
  font-size: 300pt;
  font-weight: 500;
  margin: 0;
  line-height: 0.9; /* 缩小行高，贴合文字 */
}

3. 消除容器自身行高影响（可选） #

如果字体本身仍有顶部/底部留白，给.p-wrapper设置line-height: 0可以彻底消除容器对文字布局的干扰：

.second-section .p-wrapper {
  line-height: 0; /* 消除容器行高影响 */
}

4. 修正原代码的无效属性 #

原代码中.cityName的font-weight: 00是无效值，改为合理的权重（比如300）：

.first-section .cityName {
  font-size: 168pt;
  font-weight: 300; /* 修正无效的font-weight值 */
}

修改后的完整CSS代码 #

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap");

* {
  background-color: #e8e8e8;
  font-family: "Space Grotesk", serif;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  display: flex;
}

main {
  margin: 80px 85px;
  border: red 1px solid;
  flex: 1;
  position: relative;
}

.first-section {
  width: 100%;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.first-section .cityName {
  font-size: 168pt;
  font-weight: 300;
}

.first-section input {
  width: 400px;
  height: 60px;
  border-radius: 20px;
  top: 60px;
  right: 0;
  position: absolute;
  text-align: center;
  font-size: 20pt;
  font-weight: lighter;
}

.second-section {
  display: flex;
  justify-content: space-between;
  bottom: 0px;
  position: absolute;
  width: 100%;
  border: solid 1px rgb(57, 23, 179);
  align-items: center;
}

.second-section .square-wrapper {
  display: flex;
  gap: 80px;
}

.second-section .square-wrapper .square {
  height: 300px;
  width: 150px;
  border-radius: 20px;
  border: solid 1px blue;
}

.second-section .p-wrapper {
  line-height: 0;
}

.second-section .p-wrapper p {
  font-size: 300pt;
  font-weight: 500;
  margin: 0;
  line-height: 0.9;
}

内容的提问来源于stack exchange，提问作者Hector