HTML开发作品集网站遇元素不明空白间隙问题求助

你看到的大间隙不是margin或者padding设置错误导致的，核心是inline-block元素的默认垂直对齐规则问题：

• 你给左侧项目图片容器.image-for-project-container、右侧文本容器.project-container都设置了inline-block属性
• 行内块元素默认的垂直对齐方式是vertical-align: baseline，也就是按元素内文本的基线对齐，而非顶部对齐
• 你左侧图片固定高度为630px，远高于右侧文本容器500px的高度，基线对齐规则会让右侧容器的最后一行文本和左侧图片的底部对齐，最终把右侧文本容器整体往下挤，在上方留出大片空白。

直接给所有设置了inline-block类的元素加上顶部对齐规则即可，在你的CSS代码中补充：

.inline-block {
    vertical-align: top;
}

加完之后两个行内块元素会自动沿顶部对齐，多余的空白就会消失。

后续遇到这类定位不到的空白问题时，可以临时给可疑元素加上不同颜色的1px实线边框，就能直观看到每个元素实际占据的空间范围，快速区分是边距问题、对齐问题还是浏览器默认元素样式带来的影响。

内容的提问来源于stack exchange，提问作者Afif Mohammed Varikkodan