html – 两个按钮之间的奇怪差距

参见英文答案 > How do I remove the space between inline-block elements?35个
我正在使用HTML按钮标记遇到奇怪的行为.似乎当我并排放置两个按钮时,它们之间的间隙为4px,无处不在.

这是一个显示问题的fiddle.

从下图中可以看出,FireBug显示间隙既不是边距也不是填充(因为填充将以紫色显示).

请注意：我在Windows 8.1上使用的是最新版本的Firefox,我也试过了Eric Mayer的CSS重置版,但差距仍然存在.

这不是一个非常重要的问题,但知道它是否正常以及它是什么原因会很好.

解决方法

问题是在内联块元素中,HTML中的空格成为屏幕上的可视空间.解决它的一些解决方案：

>使用font-size：0到父容器(您必须为子元素定义font-size)：

.buttons {
  width: 304px;
  margin: 0 auto;
  z-index: 9999;
  margin-top: 40px;
  font-size: 0;
}
button {
  background-color: transparent;
  border: 1px solid dimgray;
  width: 150px;
  height: 40px;
  cursor: pointer;
}

<div class="buttons">
  <button>Button1</button>
  <button>Button2</button>
</div>

>另一个是使用负边距 – 左：-4px

.buttons {
  width: 304px;
  margin: 0 auto;
  z-index: 9999;
  margin-top: 40px;
}
button {
  background-color: transparent;
  border: 1px solid dimgray;
  width: 150px;
  height: 40px;
  cursor: pointer;
  margin-left: -4px;
}

<div class="buttons">
  <button>Button1</button>
  <button>Button2</button>
</div>

>最后但我完全不喜欢使用html注释作为间隔符
差距之间：

.buttons {
  width: 304px;
  margin: 0 auto;
  z-index: 9999;
  margin-top: 40px;
}
button {
  background-color: transparent;
  border: 1px solid dimgray;
  width: 150px;
  height: 40px;
  cursor: pointer;
}

<div class="buttons">
  <button>Button1</button><!--
 --><button>Button2</button>
</div>

以上都可行.祝好运：)

html – 两个按钮之间的奇怪差距

解决方法

猜你在找的HTML相关文章