CSS问题：两行文本无法左对齐的原因排查

问题情况 #

尝试让两行文本在左侧同一位置对齐，但未达到预期效果。使用React实现布局，对应的CSS代码如下：

.sideBar-footer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    bottom: 10px;
}

.sideBar-footer-image {
    width: 50px;
    height: 50px;
    background-color: #D9D9D9;
    border-radius: 10px;
}

.sideBar-footer-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.sideBar-footer-text h1 {
    font-size: 15px;
    font-weight: 500;
    line-height: 15px;
    color: #FFFFFF;
}

.sideBar-footer-text p {
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    color: #FFFFFF;
}

问题原因及解决方法 #

• 核心问题：浏览器默认样式给h1和p标签设置了不同的margin值，导致两个标签的左侧偏移量不一致，视觉上呈现不对齐的效果。
• 修复步骤：
  1. 清除h1和p的默认外边距与内边距，确保两者起始位置一致：

     .sideBar-footer-text h1,
     .sideBar-footer-text p {
         margin: 0;
         padding: 0;
     }
     

  2. 可选优化：给文本容器添加左侧间距，让图片和文本布局更美观，同时保留align-items: flex-start确保文本左对齐：

     .sideBar-footer-text {
         display: flex;
         flex-direction: column;
         align-items: flex-start;
         margin-left: 12px; /* 可按需调整间距大小 */
     }
     

调整后，两行文本就能在左侧保持对齐状态。

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