How to Remove White Spaces Between Images?

Keywords: html css

Question: 

I'm currently setting up a static Jekyll blog, and am trying to have 3 images display in the sidebar as links to other places. I have setup a CSS class specifically for this but Currently they all show up with a very large gap between each and I would prefer they were much closer together.

I've tried setting the font-size to zero, changed the padding, changed the margins, changed the float, setting vertical align to bottom and I've tried setting the display to block. None of these have changed anything. I know that the CSS class is being checked as the padding for left and right are working. I've also made sure all of the HTML images are technically on the same line.

I expect the images to have no gap between them but instead there is a very large space.

It currently shows like this:

enter image description here

/*
 * Sidebar
 *
 * Flexible banner for housing site name, intro, and "footer" content. Starts
 * out above content in mobile and later moves to the side with wider viewports.
 */

.sidebar {
  text-align: center;
  padding: 1rem 1rem;
  color: rgba(126, 27, 27, 0.5);
  background-color: #EEEEEE;
  overflow: auto;
}

@media (min-width: 48em) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 15.2rem;
    text-align: left;
    border-right: 1.2px solid #CCCCCC;
  }
}


/* Sidebar links */

.sidebar a {
  color: #000;
}

.sidebar-bottom {
  position: fixed;
  bottom: 0;
  font-size: .8rem
}


/* About section */

.sidebar-about h1 {
  color: #000;
  margin-top: 5;
  font-family: 'Noto Serif', serif;
  font-size: .8rem;
  text-align: center;
}

.sidebar-image-link {
  display: block;
  padding-left: 1rem;
  padding-right: 1rem;
}


/* Sidebar nav */

.sidebar-nav {
  margin-bottom: 1rem;
}

.sidebar-nav-item {
  display: block;
  line-height: 1.75;
}

a.sidebar-nav-item:hover,
a.sidebar-nav-item:focus {
  text-decoration: underline;
}

.sidebar-nav-item.active {
  font-weight: bold;
}
<div class="sidebar-image-link">
  <a href="https://ko-fi.com/Q5Q8O5AA" target="_blank"> <img src="../public/images/kofi.png"></a>
  <a href="https://www.patreon.com/eigengrausgenerator/overview" target="_blank"> <img src="../public/images/patreonbutton.png"></a>
  <a href="https://discord.gg/A543VC5" target="_blank"> <img src="../public/images/discord.png"></a>
</div>

Answers: 

Try position:relative; or position:absolute; for your images.