设置CSS .showcase .slider img高度为70%后无法移除异常边距的解决方法

问题根因 #

出现的大尺寸异常空白和margin、padding属性设置无关，是两个基础CSS规则叠加导致的：

• 百分比高度计算失效
  CSS规范中，元素的百分比高度值，必须参照父元素的显式可计算固定高度才能生效。当前结构里，给.showcase .slider img设置了height:70%，但img的父级<li>、上层<ul>、.slider容器全程没有设置过固定高度，完全靠内部内容撑开尺寸。这种场景下浏览器会直接忽略70%的高度设置，退回到用图片固有尺寸渲染，导致容器和图片尺寸不匹配，多余空间就形成了看到的异常空白。
• 行内替换元素的默认基线间隙
  <img>默认是行内替换元素，对齐规则为vertical-align: baseline，哪怕区域内没有任何文本，行盒也会为基线对齐预留固定空间，在图片底部形成额外间隙。

修复步骤 #

按顺序调整即可完全消除间距：

1. 重构高度参照逻辑
   不要把高度百分比直接套在图片上，先给上层容器明确的高度规则：
   • 给.showcase设置显式高度，比如适配全宽头图场景的height: 85vh
   • 给.slider设置height: 70%，让滑块容器占showcase总高度的70%，作为图片尺寸的参照基准
2. 消除行内元素固有间隙
   修改img的基础属性，彻底解决基线对齐问题：

   .showcase .slider img {
     display: block; /* 转为块级元素，消除行内基线对齐的预留空间 */
     width: 100%;
     height: 100%; /* 滑块容器有明确高度后，100%高度可完全填满容器，无空余 */
     object-fit: cover; /* 保持图片宽高比，避免拉伸变形 */
   }
   

3. 补全flex布局的对齐规则
   给.showcase .slider补充align-self: stretch，适配父级showcase的flex列布局规则，避免滑块被默认的居中对齐压缩尺寸；给.showcase .slider li补充display: flex; align-items: center;，让内部图片垂直居中，无错位偏移。

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