我怎样才能消除图像和 header 之间的这个小差距？

Question

我的 <div> 元素中有 <a> 元素，其中包含 <img> 和 <p>。由于某种原因，图像和文本之间出现了一个我无法删除的小间隙。我尝试将 margin-top: 0px 添加到 <p> 元素，但没有解决问题。有没有其他方法可以消除这个差距？

截图如下：

这里是 html 和 css:

.project-tile {
  margin: 20px 20px 20px 20px;
  text-decoration: none;
  background-color: blue;
  margin-bottom: auto;
}

.project-tile:hover .brackets{
    color: orange;
}

.project_screenshot {
  width: 100%;
  border-radius: 10px 10px 0px 0px;
}

.project_name {
  font-size: 1.5em;
  padding: 20px;
  margin-top: 0px;
  border-radius: 0px 0px 10px 10px;
  background-color: cyan;
}

<div class="project-tile" id="tribute_page">
          <a href="https://codepen.io/konstantinkrumin/full/PooYQbG" target="_blank" id="tribute_page_link">
            <img class="project_screenshot" src="https://i.imgur.com/cV4pKsg.png" alt="tribute_page_screenshot">
            <p class="project_name"><span class="brackets">&lt;</span> Tribute Page <span class="brackets">/&gt</span></p>
          </a>
 </div>

Answer 1

默认垂直对齐设置为 baseline。

只需在图像中添加 display:block 或 vertical-align:top 即可。使用您的 class，这将适用于 .project_screenshot

我怎样才能消除图像和 header 之间的这个小差距？

How could I remove this little gap between an image and header?

html

css

responsive-design