时间戳

首页 > 解决方案 > 我怎样才能消除图像和标题之间的这个小间隙？

html - 我怎样才能消除图像和标题之间的这个小间隙？

问题描述

我在这里有<a>元素，<img>里面<p>有我的<div>元素。由于某种原因，图像和文本之间出现了我无法删除的小间隙。我尝试添加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>

标签： htmlcssresponsive-design

解决方案

这是默认的垂直对齐设置为baseline.

只需添加display:block或vertical-align:top到图像。与您的班级一起，这将适用于.project_screenshot

推荐阅读