作者:追求生活的垃圾筒 | 来源:互联网 | 2022-12-19 21:11
我有这样的HTML结构:
实际上每行有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
问题是行之间有边界/边距我不知道如何摆脱.我希望细胞正好相互对立.这是它的代码.这是一个截图:
![在此输入图像描述](https://img.php1.cn/3cd4a/1eebe/cd5/4283cd4bbba41b87.png)
1> mmdts..:
添加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/