HTML边框对齐问题：如何让第二个边框精准对齐电话图标下方

你当前的问题在于把图标和下方的信息框拆成了独立元素，靠百分比margin来定位——这种方式依赖屏幕尺寸，很难做到精准对齐。正确的做法是把每个图标和对应的信息框放在同一个容器里，用Flexbox实现整体关联布局，这样不管屏幕怎么变，图标和信息框都会始终对应。

修改后的完整代码如下：

CSS 代码 #

.nav {
  background-color: crimson;
  height: 60px;
  display: flex;
  align-items: center; /* 垂直居中内部元素，替代原手动margin-top */
}

/* 包裹所有联系人项的父容器 */
.contact-container {
  display: flex;
  justify-content: center; /* 让三个项在页面水平居中分布 */
  gap: 5%; /* 控制项之间的间距，比margin更灵活可控 */
  margin-top: 12%;
}

/* 单个联系人项容器：图标+信息框的整体 */
.contact-item {
  display: flex;
  flex-direction: column; /* 让图标在上、信息框在下，垂直排列 */
  align-items: center; /* 内部元素水平居中，从结构上保证图标与信息框对齐 */
}

/* 修改信息框样式：移除错位根源的float和硬编码margin-left */
.b1 {
  border: 1px solid rgba(255, 0, 0, 0.464);
  height: 280px;
  width: 224px;
  margin-top: 1.2%;
  display: flex;
  align-items: flex-start; /* 让文本靠顶部对齐 */
  padding-left: 9px;
  padding-top: 4%;
}

.b1 p {
  color: white;
  font-family: Verdana;
  font-weight: bold;
  margin: 0; /* 清除p标签默认margin，避免间距混乱 */
}

HTML 代码 #

<div class="nav">
  <a href="movie.html">
    <img src="images/back.png" width="30px" height="30px" style="margin-left: 10px;">
  </a>
  <h1 style="margin-left: 20px; font-family:Verdana; color: white; ">CineScape</h1>
</div>

<!-- 用容器包裹所有联系人项，统一控制布局 -->
<div class="contact-container">
  <!-- 每个图标+信息框放在同一个contact-item里，形成关联 -->
  <div class="contact-item">
    <img src="images/gmail.png" height="60px" width="60px">
    <div class="b1">
      <p>cinescape@gmail.com</p>
    </div>
  </div>
  
  <div class="contact-item">
    <img src="images/telephone.png" height="60px" width="60px">
    <div class="b1">
      <p>042-8382999</p>
    </div>
  </div>
  
  <div class="contact-item">
    <img src="images/linkedin.png" height="60px" width="60px">
    <!-- 可在此添加LinkedIn对应的信息框 -->
  </div>
</div>

关键修改说明 #

• 新增contact-container父容器：通过Flexbox实现三个联系人项的水平均匀分布，替代原不可靠的margin-left百分比定位
• 用contact-item包裹单个图标和信息框：内部垂直Flex布局+水平居中，从结构上确保图标与信息框始终对齐
• 移除原代码中float和硬编码margin-left：改用Flex属性控制布局，适配不同屏幕尺寸时不会错位

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