如何用CSS调整邮箱图标与文本间距，使邮箱文本右对齐至图标平齐？

针对你提到的邮箱图标与文本间距调整、对齐问题，以下是修改后的CSS代码及说明：

.contactInfo {
  padding-top: 30px;
  padding-left: 30px;
  padding-bottom: 20px;
  font-size: 16px;
  border-bottom: 3px solid rgba(251, 249, 249, 0.943);
}

.title {
  color: rgb(78, 154, 116);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
}

.contactInfo ul {
  position: relative;
  padding-top: 15px;
}

.contactInfo ul li {
  position: relative;
  list-style: none;
  cursor: pointer;
  margin: 10px 0;
  /* 让图标与文本垂直居中对齐 */
  display: flex;
  align-items: center;
}

.contactInfo ul li .icon {
  width: 30px;
  font-size: 30px;
  color: rgb(84, 152, 125);
  padding-left: 25px;
  /* 固定图标宽度，避免挤压文本 */
  flex-shrink: 0;
  /* 统一图标与文本的间距 */
  margin-right: 20px;
}

.contactInfo ul li span {
  color: #dbd8d8;
  font-size: 20px;
  /* 移除多余左内边距，靠flex布局对齐 */
  padding-left: 0;
}

.contactInfo ul li p {
  padding: 0;
  font-size: 20px;
  padding-left: 0;
}

.contactInfo ul li text {
  padding-left: 0;
  position: static;
}

.contactInfo ul li a {
  color: rgb(243, 239, 239);
  font-size: 20px;
  padding-left: 0;
}

核心调整点： #

• 给列表项添加display: flex; align-items: center;，让图标和文本在同一行垂直居中，从根源解决对齐混乱问题。
• 给图标设置flex-shrink: 0固定宽度，同时用margin-right统一图标与文本的间距，确保所有联系方式的文本起始位置一致。
• 移除各类文本元素上多余的padding-left，让文本自然跟随图标排列，保持整体对齐效果统一。

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