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个tile行和10个tile。

我使用以下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

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

Answer 1

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

解释：

来自https://www.w3.org/TR/CSS2/visudet.html#line-height

的CSS指定

如内联格式化上下文，用户代理一节中所述   将内联级框流入垂直堆叠的线框。该   线框的高度确定如下：

计算行框中每个内联级别框的高度。对于   替换元素，内联块元素和内联表元素，   这是他们边缘盒子的高度;对于内联盒，这是   他们的'线高'。（参见“计算高度和边距”和   “领先和半领先”中的内联框高度。）

内联级别框根据其垂直对齐   'vertical-align'属性。如果它们对齐“顶部”或“底部”，   它们必须对齐，以尽量减少线盒高度。如果是这样   盒子足够高，有多种解决方案和CSS 2.1   没有定义线框基线的位置（即位置   支柱，见下文）。

线框高度是最上面的框顶部与之间的距离   最底部的盒子底部。（这包括支柱，如下所述   'line-height'在下面。）

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

以及规范的其他部分：

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

和

内联级元素是源文档的那些元素不要形成新的内容块;内容以行分发

结论是内联块图块算作真正的大字符，而线条高度只会使线条略大于字符。

相关链接：

Answer 2

对display:table-cell

使用.tile

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

pen

Answer 3

问题出现在display: inline-block其他解决方案可能是font-size: 0;或显示：flex而不是inline-block

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

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

Answer 4

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

{
    "uniqueId": 1,
    "name": "Daniel",
    "courses": [
        {
            "uniqueId": 123,
            "name": "CS 101",
            "summary": "An introduction to Computer Science",
            "beginDate": "2018-04-20"
        }
    ]
}

Answer 5

也许你应该尝试：

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

如果它仍然不起作用，您可能会有一些其他css代码影响您的元素。您可以使用！important覆盖它，例如：margin: 0 !important。

祝你好运！

无法删除CSS中的填充/边距

5 个答案: