无法在CSS中移除填充/边距

Question

我有一个像这样的HTML结构：

<div id='root'>
  <div class='tile-row'>
    <div class='tile'></div>
    <div class='tile'></div>
  </div>
  <div class='tile-row'>
    <div class='tile'></div>
    <div class='tile'></div>
  </div>
</div>

实际上有10个贴瓷行和每行10个贴瓷。

我正在使用以下Sass进行样式设置：

body, html
  overflow-x: scroll
  padding: 0
  margin: 0
  background-color: black
  color: white

.tile-row
  display: block
  margin: 0
  padding: 0

.tile
  display: inline-block
  outline: 1px solid white
  width: 10px
  height: 10px

问题在于行之间存在边框/边距，我不知道如何去掉它。我希望单元格紧贴在一起。这里是一个codepen链接here，这里有一张截图：。

- max pleaner

Answer 1

将 line-height: 0 添加到您的.tile-row，或将其显示更改为除 inline-block 之外的其他内容（例如，任何 table-*、grid 或 flex 显示）。

解释：

根据可在https://www.w3.org/TR/CSS2/visudet.html#line-height上找到的 CSS 规范，用户代理将内联级框流入垂直堆叠的行框中。 行框的高度如下确定：

计算行框中每个内联级框的高度。 对于替换元素、inline-block 元素和 inline-table 元素，这是它们的边距框的高度。对于内联框，这是它们的‘line-height’。（请参见“计算高度和边距”以及“前导和半导线中的内联框的高度”。）

根据其'vertical-align'属性垂直对齐内联级框。 如果它们是'top'或'bottom'对齐，则必须对齐以使行框高度最小化。 如果这些框足够高，则存在多个解决方案，而 CSS 2.1 不定义行框的基线位置（即支撑杆（见下文）的位置）。

行框高度是上面框顶和下面框底之间的距离。（这包括支撑杆，如下“line-height”所述。）

空内联元素生成空内联框，但这些框仍具有边距、填充、边框和行高，并且因此影响这些计算，就像具有内容的元素一样。

以及规范的其他部分：

inline-block 此值会导致元素生成内联级块容器。 inline-block 的内部格式化为块框，元素本身则格式化为原子内联级框。

以及：

内联级元素是源文档中不形成新内容块的那些元素； 内容按行分布

结论是内联块瓷砖被视为非常大的字符，行高只会通过使行略大于字符来影响它们。

相关链接：

• How CSS line-height is measured?
• https://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/

- mmdts

---

line-height 影响文本基线。您是不是指 height？ - bowl0stu

我明确指的是行高。改变字体大小也可以，但如果OP想在.title-row中写任何内容，这将破坏其中的任何内容。编辑：重点是inline-block瓷砖被视为“非常大的字符”，而行高只是通过使行比字符略大来影响它们，尽管不要完全相信我的话。 - mmdts

line-height 影响文本而非单元格定位。OP 没有提到文本放置在 .tile 元素中。这个回答怎么解决问题？ - bowl0stu

.tiles本身是.tile-row的文本，因为它们是inline-block，您可以查看规范以获取详细信息。或者您可以直接将其添加到JSFiddle中并查看其是否有效。 - mmdts

编辑了我的答案，提供了详细的解释。 - mmdts

Answer 2

使用display:table-cell来设置.tile的样式。

.tile
  display: inline-block
  outline: 1px solid white
  width: 20px
  height: 20px
  display: table-cell

笔

- Taki

Answer 3

问题出现在display: inline-block上，另一个解决方案可能是font-size: 0;或使用display: flex代替inline-block。

.tile-row
  display: block
  margin: 0
  padding: 0
  font-size: 0

如果你使用font-size: 0的解决方案，请不要忘记设置.tile的字体大小。

- August

Answer 4

虽然调整行高可能有所帮助，但由于您知道网格的宽度，因此可以为网格本身设置宽度，然后强制元素向左浮动。由于每个单元格都是20x20，因此网格的最大宽度将为200。以下是我为您的网格提供的解决方案：

  .tile-row
      display: block
      margin: 0
      padding: 0
      max-width: 200px

  .tile
      display: inline-block
      float: left
      outline: 1px solid white
      width: 20px
      height: 20px

- CaliCo

Answer 5

也许你应该尝试：

position: relative
float: left
margin: 0
padding: 0

如果仍然无法正常工作，可能是其他 CSS 代码影响了您的元素。您可以使用 !important 来覆盖它，例如：margin: 0 !important。

祝你好运！

- sipi09