- ， 8 2月 2021
- 作者 847954981@qq.com
- 前端学习, 我的编程之路
行内元素与块元素间的转换及行内块元素
在HTML中行内元素和块元素间的区分，本质上是其标签默认存在了一个 display 属性，当 display 属性的值为 block 那么所对应的标签即为块元素，反之当值为 inline 则标签为行内元素。
借此原理，我们可以让指定标签在块元素与行内元素之间转换。
注，display 属性的值也可以设置为 none 此时表示此标签隐藏
在前面的文章中，我们知道了行内元素与块元素的区别
链接地址
但如果我们将 display 的值调节为 inline-block 此标签即为 行内块元素，简单来说就是能在同一行显示的块元素。
但如果我们使用 行内块，想制作如右图上部矩形的效果，缺往往发现只能做出如下面矩形的效果，两个块之间多了一道空白。
其原因是因为在HTML中，回车会被当做是一个文字，所以这个空白就是文字的空白。
至于如何消除这个空白，有如下三种方法。
1.消除回车
即 将两个块标签写在同一行内，就不会存在回车，也同样不会存在空白了。
2.给父元素添加 word-spacing 属性
word-spacing 即单词与单词间的距离，将两个块放在统一父元素下，将父元素的单词间距调整为负数(这里的值要尽量小，一般为-20px)，这样回车造成的文字空白就消失了。
3.将父元素的 font-size 调节为 0
由于回车的表示相当于一个文字，因此当我们将父元素的字体大小调节为0，空白自然会消失。
