发表于： 2019-03-17 22:27:28
1 704
今天完成的事情：
1完成了css十四的第一个页面
2看了一下如何消除行内元素之间的空隙
明天计划的事情：
1 完成css任务
2 总结css任务
收获：
1、如何消除行内元素的之间的空隙。
把上图之间的空格消除掉。
空格产生的原因：只要是在两个行内元素之间添加空格，或者换行在浏览器中的表现都会是一个空格的距离。
这个空格的距离具体是多大呢？它是当前字体大小的一半。
空格宽度 = 当前字体大小/2
1、
所有的行内元素放在一行
2、
3、 利用注释
4、利用margin负值
（这种方法不推荐）由于外部环境的不确定性，以及最后一个元素多出的父margin值等问题，这个方法不适合大规模使用。
四、让闭合标签吃胶囊
只用一个a的闭合标签。
五、使用font-size:0
.box { font-size: 0; } .space a { font-size: 12px; }
六、使用letter-spacing
.box { letter-spacing: -3px; } .space a { letter-spacing: 0; }
定义和用法
letter-spacing 属性增加或减少字符间的空白（字符间距）。
该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄，指定长度值时，会调整字母之间通常的间隔。因此，normal 就相当于值为 0。
注释：允许使用负值，这会让字母之间挤得更紧。
七、使用word-spacing
.space { word-spacing: -6px; } .space a { word-spacing: 0; }
一个是字符间距(letter-spacing)一个是单词间距(word-spacing)，大同小异。据我测试，word-spacing的负值只要大到一定程度，其兼容性上的差异就可以被忽略。因为，貌似，word-spacing即使负值很大，也不会发生重叠。
返回列表
评论