在对 HTML 的元素应用 inline-block CSS 时，经常会出现空格，影响页面的布局。本文将介绍如何在 HTML 中去除使用 inline-block 时存在的空格。

HTML 去除使用 inline-block 时空格的方法

在本文中以如下代码为例：

CSS 代码：

.m-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.m-list li {
  display: inline-block;
  width: 2em;
  height: 2em;
  background: #f06;
  border: 1px solid;
}

HTML 代码：

<ul class="m-list">
  <li></li>
  <li></li>
</ul>

方法一：修改元素的布局为弹性布局

对元素设置弹性布局，在解析 HTML 时将不会生成空格。

示例代码如下：

CSS 代码：

.m-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.m-list li {
  display: flex;
  width: 2em;
  height: 2em;
  background: #f06;
  border: 1px solid;
}

HTML 代码：

<ul class="m-list">
  <li></li>
  <li></li>
</ul>

方法二：把元素代码放在一行内

把使用 inline-block 的元素代码放在一行内，在处理 HTML 时将不生成空格。

示例代码的形式如下：

<ul class="m-list">
  <li></li><li></li>
</ul>

方法三：对元素设置负内边距

对使用 inline-block 的元素设置负内边距，将覆盖空格的位置，在显示上看不到空格，但是空格依旧存在。

示例代码的形式如下：

CSS 代码：

.m-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.m-list li {
  display: inline-block;
  width: 2em;
  height: 2em;
  margin-right: -0.25rem;
  background: #f06;
  border: 1px solid;
}

HTML 代码：

<ul class="m-list">
  <li></li>
  <li></li>
</ul>

结语

在对 HTML 的元素应用 inline-block CSS 时，会出现空格，影响页面布局。本文介绍了三种方法去除 HTML 中使用 inline-block 时多余的空格，三种方法分别为：修改元素的布局为弹性布局，把元素代码放在一行内，对元素设置负内边距。