React搜索应用首元素联系人卡片高度异常问题求助

优先排查图片基线对齐问题 #

图片默认作为行内块元素，会和文字基线对齐，这经常导致下方出现莫名空隙。给卡片内的图片添加以下样式即可解决：

.card-image img {
  display: block;
  /* 或者用 vertical-align: bottom; 也能达到效果 */
}

检查Semantic UI卡片的默认样式 #

Semantic UI的card组件可能对首个子元素设置了特殊的margin/padding。打开浏览器开发者工具，查看第一个卡片的.image容器样式，若发现异常的间距值，用自定义CSS覆盖：

.ui.card:first-child .image {
  margin: 0;
  padding: 0;
}

排查自定义CSS的全局样式污染 #

检查你的SearchBar.module.css，确认是否存在:first-child选择器不小心给首个卡片添加了额外内边距/外边距。比如类似这样的错误规则：

.contact-card:first-child .content {
  padding-bottom: 24.5px;
}

如果有，删除或调整该选择器的作用范围。

强制统一卡片高度（兜底方案） #

若以上方法无效，可通过flex布局强制所有卡片高度一致：

.contact-card-container {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.contact-card {
  flex: 1 0 auto; /* 让卡片自动填充容器高度 */
}

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