响应式图片画廊布局异常：%单位下元素错位问题求助

问题根源 #

使用%单位后元素偏移，主要是两个原因：

• inline-block元素默认基线对齐，窗口尺寸变化时，部分元素会因内容高度差异出现偏移
• 浏览器会解析inline-block元素间的空白字符，导致布局宽度计算偏差；加上容器固定高度限制，进一步放大了错位问题

具体修复步骤 #

1. 强制顶部对齐，消除基线偏移
   给.gallery添加vertical-align: top;，让所有画廊元素统一沿顶部对齐，彻底解决基线对齐导致的错位。

2. 消除inline-block元素间的空白
   给.container设置font-size: 0;，浏览器就不会解析元素间的换行/空格；同时给.gallery单独设置font-size: .7em;，保证子元素文字大小正常。

3. 移除固定高度限制
   把.container的height:20vw;改成min-height:20vw;或者直接删除，让容器自适应内容高度，避免窗口变化时因高度不足导致元素溢出偏移。

4. 优化hover时的边框跳动
   hover时边框从1px变2px会导致元素尺寸变化，可改用box-shadow替代，或者给默认状态设置透明边框：

   .gallery{
     border: 1px solid transparent;
   }
   .gallery:hover{
     border-color: black;
   }
   

   （或用box-shadow: 0 0 0 2px black;替代边框变化）

修改后的完整CSS代码 #

*{
    box-sizing: border-box;
    margin:0px;
  }

 header{
    background-color: hsl(0, 0%, 50%);
    padding:4%;
  }

 .container{
    min-height:20vw;
    margin:5%; 
    font-size: 0; /* 消除inline-block元素间空白 */
  }

  h1{
    text-align: center;
    font-size: 1.5em; /* 重置h1字体大小，不受container的0影响 */
  }

  .gallery{
    max-width:100%;
    height:100%;
    text-align:center;
    display:inline-block;
    border:1px solid hsl(0, 0%, 70%);  
    vertical-align: top; /* 强制顶部对齐 */
    font-size: .7em; /* 重置字体大小 */
    width: 24%; /* 自定义列宽，比如4列布局，留少量margin避免拥挤 */
    margin: 0.5%;
  }
  .gallery img{
   width:100%;
   height:75%;
   display:block;
   object-fit: cover; /* 保持图片比例，避免拉伸变形 */
  }

 .car_names{
      background-color: hsl(0, 0%, 50%);
      padding:2%;
      font-size: 1em;
      height:25%;
      display: flex;
      align-items: center;
      justify-content: center; /* 文字垂直水平居中 */
  }
 .gallery:hover{
  border:2px solid black;
  font-weight:bold;
  /* 可选：用box-shadow替代边框，避免尺寸跳动 */
  /* box-shadow: 0 0 0 2px black; */
  }

  @media screen and (max-width:600px)
 {
   .gallery{
    display:block;
    margin-bottom:1%;
    width:auto;
    height:auto;
    font-size: .7em;
    }
    .container{
      font-size: initial; /* 移动端重置容器字体大小 */
    }
 }

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