删除引导导航栏中图形按钮之间的填充答案

【问题标题】：Removing padding between graphical buttons in bootstrap navbar删除引导导航栏中图形按钮之间的填充
【发布时间】：2017-05-16 03:50:22
【问题描述】：

我有想要用于引导导航栏的图形按钮（不是 API 提供的默认“按钮”）。但是我似乎无法弄清楚如何删除它们之间的填充/空间。请参见下面的示例。最下面一排按钮是我想要的。我已经尝试对我的 CSS 进行各种更改，将填充和边距设置为 0px，但没有任何效果。感谢您提供的任何指导。

Bootstrap buttons before and after (desired results)

【问题讨论】：

标签： css button navbar padding margins

【解决方案1】：

其中一些已经解决。首先。我所要做的就是创建一种样式，例如：

.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>

但是，图形按钮本身周围的实际“a”链接仍然存在填充/边距问题，我无法弄清楚如何消除。查看屏幕截图中按钮周围的蓝色细框。我需要缩小区域，以便它只包含图形而不包含其他任何东西（看看它如何重叠到它右侧的图像上。）有什么想法吗？ overlapping a link

【讨论】：

【解决方案2】：

我认为您可以浮动按钮或将按钮的父节点的字体大小设置为 0。

你可以看到这个：https://css-tricks.com/fighting-the-space-between-inline-block-elements/

【讨论】：