不同容器使用margin-top调整位置时文本偏移牵连全页内容问题求助

问题原因 #

• 你给.head-title设置margin-top时触发了外边距塌陷（margin collapse）：当父元素没有设置上边框、上内边距，也没有触发BFC（块级格式化上下文）时，子元素的上外边距会直接穿透到父元素上，导致父元素连同内部所有内容一起向下偏移。
• 图片的margin-top不影响其他内容是因为你给#img-protect设置了float: left，浮动元素会自动触发BFC，不会发生外边距穿透，所以外边距仅作用于元素自身。
• 你贴出的HTML存在语法错误：.head-subtitle容器没有写闭合标签，也可能导致布局解析异常。

解决方法 #

任选下面一种方案即可快速修复：

1. 给包裹整个Home区域的外层父容器添加触发BFC的属性，阻止外边距穿透：

/* 假设外层容器类名为home-container，可替换为你实际的类名 */
.home-container {
  overflow: hidden; /* 无其他布局冲突时首选 */
  /* 可选替代方案，按需选一种即可
  display: flow-root;
  padding-top: 1px;
  border-top: 1px solid transparent;
  */
}

2. 将.head-title的margin-top替换为padding-top，内边距不会触发外边距塌陷：

.head-title {
  font-size: 36px;
  font-weight: 500;
  color: #20c20e;
  padding-top: 10%; /* 替换原来的margin-top */
  margin-top: 0;
}

3. 先补全HTML的闭合标签，避免语法问题干扰布局：

<div class="head-subtitle">
  <p>I'M ANONYMOUS</p>
</div> <!-- 补加这个缺失的闭合标签 -->
<div class="buttons">
  <a href="#contact">HIRE ME</a>
  <a href="#">KNOW MORE</a>
  <a href="#">LET'S TALK</a>
</div>

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