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