无法删除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

问题是行之间有边界/边距我不知道如何摆脱.我希望细胞正好相互对立.这是它的代码.这是一个截图:

Answer 1

添加line-height: 0到您.tile-row或改变其显示比其他的东西inline-block(例如,任何table-*或grid或flex显示器).

说明:

从https://www.w3.org/TR/CSS2/visudet.html#line-height上提供的CSS规范

如关于内联格式化上下文的部分所述,用户代理将内联级别框插入到垂直堆栈的行框中.线框的高度确定如下:

计算行框中每个内联级别框的高度.对于替换元素,内联块元素和内联表元素,这是其边距框的高度; 对于内联盒子,这是他们的"线高".(请参阅"计算高度和边距"以及"前导和半前导"中的内联框的高度.)

内联级框根据其"垂直对齐"属性垂直对齐.如果它们对齐"顶部"或"底部",则必须对齐它们以便最小化线盒高度.如果这样的盒子足够高,则有多种解决方案,CSS 2.1没有定义线盒基线的位置(即支柱的位置,见下文).

线盒高度是最上面的盒子顶部和最下面的盒子底部之间的距离.(这包括支柱,如下面'line-height'所述.)

空内联元素生成空的内联框,但这些框仍然具有边距,填充,边框和线高,因此影响这些计算就像具有内容的元素一样.

以及规范的其他部分:

inline-block此值使元素生成内联级块容器.内联块的内部被格式化为块框,元素本身被格式化为原子内联级框.

和:

内联级元素是源文档中不构成新内容块的元素; 内容按行分发

结论是内联块图块算作真正的大字符,线条高度只会通过使线条略大于字符来影响它们.

相关链接:

• 如何测量CSS线高？
• https://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/