用户资料页头像与用户名顶部错位：如何实现二者顶部对齐？

偏移的核心原因是：h3元素的文字默认基于基线排版，即便你已经清除了margin，文字的视觉位置仍会比容器顶部略低，导致和头像顶部出现错位。

方法一：调整h3的行高 #

给h3添加line-height: 1;，让文字顶部与h3容器顶部完全对齐：

h3 {
  margin: 0;
  line-height: 1; /* 新增样式 */
}

方法二：明确flex子元素对齐规则 #

在保持banner-user的align-items: flex-start基础上，给h3添加align-self: flex-start;，强制指定其在交叉轴上的顶部对齐：

h3 {
  margin: 0;
  align-self: flex-start; /* 新增样式 */
}

完整修正代码（含笔误修复） #

原代码中CSS的image标签选择器对应HTML里的.image类，这里一并修正：

CSS

.profile {
  max-width: 1220px;
  margin: 0 auto;
}

.banner {
  position: relative;
  border: 1px solid black;
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.image { /* 修正为类选择器 */
  border: 1px solid black;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
    
.banner-user {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: flex-start;
}
      
.avatar {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin-right: 10px;
}

h3 {
  margin: 0;
  line-height: 1; /* 采用方法一的样式 */
}

HTML

<div class="profile">
  <div class="banner">
    <div class="image"></div>
    <div class="banner-user">
      <div class="avatar"></div>
      <h3>Admin</h3>
    </div>
  </div>
</div>

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