学习元素之间空白的产生之前,我们需要知道块级元素与行内元素的区别
块级元素是会独占一行的,按垂直方向排列。
行内元素不会占据整行,在一条直线上排列,都是同一行,按水平方向排列
除了块级元素和行内元素,还有一种行内块元素,其实质上也是行内元素,所以多个行内块元素之间也会出现空白间隔的问题。img元素就是典型的行内块元素,这里就不举例了。
从上面我们可以明显的看出在没有设置margin的情况下,多个块级元素之间没有空白,而是从上到下紧挨这排列的
同样,行内元素span 也没有设置margin,但是多个行内元素之间存在空白部分,这是为什么呢?
因为在html中行内元素间的换行符/空格是有意义的,浏览器会在渲染时将行内元素之间的换行符/空格转换为一定像素的空白。
那知道了这个原因,就应该很容易地解决这个问题了,我们只需要在写代码的时候,将换行符删掉不就可以了吗?来试一试吧
案例1
行内元素span行内元素span行内元素span案例效果如下:
这种方式虽然可以解决元素之间的空白问题,但是当
标签:总结,10,行内,span,块级,31,元素,空白,换行符 From: https://www.cnblogs.com/lmyy/p/17810208.html