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

发布时间：2020-12-14 18:30:59 所属栏目：资源来源：网络整理

导读：参见英文答案 How do I remove the space between inline-block elements?35个我正在使用HTML按钮标记遇到奇怪的行为.似乎当我并排放置两个按钮时,它们之间的间隙为4px,无处不在. 这是一个显示问题的fiddle. 从下图中可以看出,FireBug显示间隙既不是边距也

参见英文答案 > 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>

以上都可行.祝好运：)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!