如何将<section>与下方<p>元素无缝衔接？附HTML/CSS代码

直接给你调整后的代码，核心是把图片和标题块放进同一个容器，消除默认间距，统一圆角样式：

修改后的HTML代码 #

<div id="projects">
  <h3 id="intro-projects">This are my HTML/CSS Web Responsive projects</h3>
  <br />
  <div class="project-container" id="project-1">
    <a href="https://survey-form.freecodecamp.rocks" target="_blank">
      <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg" />
    </a>
    <p class="project-tile">SURVEY FORM</p>
  </div>
  <div id="space_bottom"></div>
</div>

修改后的CSS代码 #

#projects {
  background: linear-gradient(#5db7de, #4e9bbb);
  flex-direction: column;
  align-items: center;
  display: flex;
}

.project-container {
  width: 500px;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 30px;
}

img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  display: block;
}

.project-tile {
  font-size: 40px;
  font-weight: bold;
  background-color: #113f53;
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

关键调整点 #

• 新增project-container容器包裹图片和标题块，统一控制整体尺寸与圆角，避免元素分离。
• 给图片设置display:block，消除inline-block元素默认的底部空白间隙。
• 去掉标题块（p元素）的默认margin，彻底消除上下元素的间距。
• 用容器的overflow:hidden配合border-radius，让整个模块呈现和目标图一致的圆角效果。

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