Question

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

Bootstrap buttons before and after (desired results)

Answer 1

我认为您可以浮动按钮或将按钮的父节点的font-size设置为0.

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

Answer 2

其中一些已被弄清楚了。首先。我所要做的就是创建一个样式，如：

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

但是，我仍然有一个填充/边距问题与实际＆＃34; a＆＃34;链接图形按钮本身，我无法弄清楚如何消除。请参阅屏幕截图中按钮周围的蓝色小框。我需要让区域缩小，以便它只包围图形而不包围其周围（看它是如何重叠到图像右侧的图像。）任何想法？ overlapping a link

删除bootstrap导航栏中图形按钮之间的填充

2 个答案: