Question

我正在开发一个需要对齐字母网格的项目。它必须用标签填充，这样我就可以使用css类来处理单个单词。

这是我迄今为止所尝试过的：

＆＃13;

@import 'https://fonts.googleapis.com/css?family=Fira+Mono';

.clockContainer {
  margin: auto;
  color: black;
  letter-spacing: 5px;
}

.clockLetter {
  font-family: 'Fira Mono', monospace;
  display: inline-block;
  margin: 0;
  padding: 0;
}

.clockLetter::after {
  display: none;
  margin: 0;
  padding: 0;
}

.clockLetter::before {
  display: none;
  margin: 0;
  padding: 0;
}

＆＃13;

<div class="clockContainer">
  <!-- First row -->
  <div class="clockLetter" id="clockIts">ITS</div>
  <div class="clockLetter" id="clockIgnore">Z</div>
  <div class="clockLetter" id="clockA">A</div>
  <div class="clockLetter" id="clockIgnore">T</div>
  <div class="clockLetter" id="clockHalf">HALF</div>
  <div class="clockLetter" id="clockIgnore">B</div>
  <br/>
  <!-- Second row -->
  <div class="clockLetter" id="clockIgnore">IP</div>
  <div class="clockLetter" id="clockTen">TEN</div>
  <div class="clockLetter" id="clockQuarter">QUARTER</div>
  <br/>
</div>

＆＃13;

看看字母如何排列直到div关闭然后出现一个奇怪的未经请求的空格，破坏了对齐。我该如何预防/删除？

我已经使用等宽字体，因此不是问题。

编辑：

我设法通过将行包装在.clockRow元素中并添加此css规则来解决问题：

.clockRow>.clockLetter:not(:nth-child(1)) {
  margin-left: -9px;
}

这不是最佳解决方案，所以我仍然愿意接受更好的答案。（从CSSTricks中获取了一页＆＃39;书：https://css-tricks.com/fighting-the-space-between-inline-block-elements/）

Answer 1

使用下面的代码并调整间距..

 letter-spacing: 0 px;

Answer 2

在css中更改字母间距，如下所示

.clockLetter {
     letter-spacing: 0.01em;
}

如何用CSS删除段落间距？

2 个答案: