Removing padding between graphical buttons in bootstrap navbar

Question

I have graphical buttons (not the default "button" provided by the API) that I want to use for my bootstrap navbar. However I can't seem to figure out how to remove the padding/space in between them. See example below. The bottom row of buttons is what I want. I've tried all manner of changes to my CSS with padding and margins set to 0px but nothing works. Thanks for any guidance you can provide.

Bootstrap buttons before and after (desired results)

Answer 1

Some of this has been figured out. To begin with. All I had to do was create a style such as:

.navbar-link {
  padding-left: 0px; 
  padding-right: 0px;
  margin-right: -15px; (removes space around the right side)
  margin-left: -15px; (removes space around the left side)
 }

<li><a class="navbar-link" href="about.html"><img src="images/buttons_navbar/btn_About_Us.png" alt="About Us" class="img-responsive"></a></li>

However, I still have a padding/margin issue with the actual "a" link around the graphical button itself that I can't figure out how to eliminate. See the thin blue box around the button in the screenshot. I need to get area shrunk down so that it encloses just the graphic and nothing else around it (see how it overlaps onto the image to the right of it.) Any ideas? overlapping a link

Answer 2

I think you can float the buttons or set the buttons's parent node's font-size to 0.

You can see this: https://css-tricks.com/fighting-the-space-between-inline-block-elements/