如何解决CSS和HTML中文本下移带动图片下移的问题？

问题原因 #

这是**垂直外边距塌陷（Margin Collapse）**的典型表现：当块级元素的垂直外边距相邻时，浏览器会将它们合并成一个单一的外边距。你的.titles h2自带默认margin-top，再加上设置的margin-left: 300px，而父容器.titles没有触发BFC（块级格式化上下文），导致这个外边距会和下方.row元素的外边距合并，最终表现为图片所在的.row跟着标题一起下移。

另外你的CSS里.column img重复定义了两次样式，容易引发样式冲突，建议合并。

解决方法 #

方法1：给.titles触发BFC #

给.titles添加能触发BFC的属性，直接阻断外边距合并：

.titles {
  overflow: hidden; /* 或者用 display: flow-root; 更语义化 */
}

方法2：用padding代替margin调整标题位置 #

把.titles h2的margin改成padding，从根源避免触发外边距塌陷：

.titles h2 {
  padding-left: 300px;
  margin-top: 0; /* 清除默认margin-top */
  padding-top: 100px; /* 用padding替代margin-top实现位移 */
}

优化后的完整代码 #

CSS

/* 合并重复的.column img样式，避免冲突 */
.column img {
  width: 25%;
  margin-top: 150px;
  margin-left: 150px;
  margin-right: 160px;
  transition: transform .2s;
}

.column img:hover {
  transform: scale(1.1);
}

.column h2 {
  margin-left: 0;
  font-family: 'Montserrat', sans-serif;
  margin-top: 100px;
}

.row {
  display: flex;
  align-items: center;
  justify-content: center;
}

.column {
  flex: 25%;
  padding: 10px;
  text-align: center;
}

.titles {
  overflow: hidden; /* 触发BFC，解决外边距塌陷 */
}

.titles h2 {
  margin-left: 300px;
}

HTML

<div class="titles">
  <h2>Lonoke, AR</h2>
</div>

<div class="row">
  <div class="column">
    <img src="https://via.placeholder.com/300x100" alt="A field" style="width: 50%" />
  </div>

  <div class="column">
    <img src="https://via.placeholder.com/300x100" alt="A forest" style="width: 50%" />
  </div>
</div>

额外建议 #

如果要让标题紧贴图片上方，更合理的做法是把标题放到对应的.column容器里，让标题和图片同属一个父元素，布局逻辑更清晰，也能彻底避免跨容器的外边距问题：

<div class="row">
  <div class="column">
    <h2>Lonoke, AR</h2>
    <img src="https://via.placeholder.com/300x100" alt="A field" style="width: 50%" />
  </div>

  <div class="column">
    <h2>对应图片标题</h2>
    <img src="https://via.placeholder.com/300x100" alt="A forest" style="width: 50%" />
  </div>
</div>

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