CSS布局中元素显示间距异常偏大问题排查

问题效果参考 #

复现代码 #

CSS部分 #

body {
  margin: 10px;
  font-size: 28px;
  font-family: 'Open Sans', sans-serif;
  background-color: #ffffff;
}

.footer {
  font-size: 2vw;
  width: 100%;
  padding: 10px 0 10px 0;
  margin-top: 0px;
  margin-bottom: 0px;
  background-color: #ddd;
  color: #333;
  text-indent: 0px;
  text-align: center;
}

.footer0 {
  font-size: 16px;
  width: calc(100%-80px);
  height: 230px;
  margin: 0px;
  padding-left: 40px;
  padding-right: 40px;
  padding-bottom: 0em;
  margin-bottom: 0em;
  background-color: #960017;
  color: #eee;
  text-indent: 20px;
}

.footer0 a:link,
.footer0 a:hover,
.footer0 a:visited,
.footer0 a:active {
  color: #eee;
  text-decoration: none;
}

.main {
  text-indent: 50px;
  margin: 5%;
  text-align: justify;
}

a:link,
a:hover,
a:visited,
a:active {
  color: blue;
  text-decoration: underline;
}

@media screen and (min-width: 1205px) {
  .code0 {
    margin: auto;
    margin-top: 40px;
    margin-bottom: 40px;
    padding: 20px;
    padding-bottom: 0px;
    border: 1px solid #4a3728;
    width: 1200px;
    box-shadow: 0 5px 7px 0 rgba(0, 0, 0, 0.0), 0 7px 20px 0 rgba(100, 100, 100, 0.3);
  }
}

.r {
  border-radius: 6px;
}

HTML部分 #

<body class="code0">
  <div class="main">
    Welcome to the site.
  </div>

  <br>

  <div class="footer r" style="margin-top: 20px; margin-bottom: 0px;">
    <p style="margin-top: 0px; margin-bottom: 0px;">Copyright <b>Institutum Latinum Romae</b> &copy; 2022-2022</p>
  </div>
</body>

已尝试方案 #

• 调整内部元素的margin-bottom属性
• 调整外部容器元素的padding-bottom属性
  以上操作均未解决间距异常问题。

实现逻辑说明 #

通过自定义.code0样式实现大屏适配：当屏幕宽度≥1205px时，页面在宽度1200px的固定矩形容器内渲染，优化大屏设备下的显示效果，目前该场景下出现元素间距异常偏大的问题。

问题原因 #

核心问题有两个：

1. CSS百分比外边距的计算规则问题：给.main设置的margin:5%中，上下方向的外边距并非按照父元素高度计算，而是始终相对于父元素的宽度计算。在大屏场景下.code0容器宽度固定为1200px，此时.main的上下外边距各为1200px * 5% = 60px，仅这部分就贡献了120px的上下间距，容器越宽上下间距越大。
2. 多余的换行标签：.main和.footer本身都是块级元素，默认会独占一行，两者之间额外添加的<br>标签会再增加一行的行高间距，进一步拉大了元素距离。

另外代码中还存在一处隐藏bug：.footer0样式中width: calc(100%-80px)写法错误，calc()函数内运算符两侧必须保留空格，正确写法为width: calc(100% - 80px)，否则该宽度规则不会生效。

修复方案 #

1. 修改.main的外边距规则，不要用百分比设置上下边距，改为固定值，避免随容器宽度变化：

   .main {
     text-indent: 50px;
     /* 上下边距设为固定40px，左右保留5%自适应边距 */
     margin: 40px 5%;
     text-align: justify;
   }
   

2. 删除.main和.footer之间多余的<br>标签，块级元素的间距统一通过margin属性控制，不要用换行标签凑间距。
3. 修正.footer0的宽度calc写法，避免样式失效。

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