0

I have <a> element with <img> and <p> inside my <div> element in here. And for some reason a small gap occurs between an image and the text that I can't remove. I tried adding margin-top: 0px to the <p> element, but it didn't fix the issue. Is there any other way I could remove this gap?

Here is the screenshot: Here is the screenshot:

And here the html and 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>
Konstantink1
  • 575
  • 1
  • 8
  • 26

1 Answers1

1

That's the default vertical alignment set to baseline.

Just add display:block or vertical-align:top to the image. With your class, that would apply to .project_screenshot

Johannes
  • 64,305
  • 18
  • 73
  • 130