10月31日总结

发布时间 2023-11-05 08:47:07作者: lmyyyy

学习元素之间空白的产生之前,我们需要知道块级元素与行内元素的区别

块级元素是会独占一行的,按垂直方向排列。

行内元素不会占据整行,在一条直线上排列,都是同一行,按水平方向排列

除了块级元素和行内元素,还有一种行内块元素,其实质上也是行内元素,所以多个行内块元素之间也会出现空白间隔的问题。img元素就是典型的行内块元素,这里就不举例了。

从上面我们可以明显的看出在没有设置margin的情况下,多个块级元素之间没有空白,而是从上到下紧挨这排列的

同样,行内元素span 也没有设置margin,但是多个行内元素之间存在空白部分,这是为什么呢?

因为在html中行内元素间的换行符/空格是有意义的,浏览器会在渲染时将行内元素之间的换行符/空格转换为一定像素的空白。

那知道了这个原因,就应该很容易地解决这个问题了,我们只需要在写代码的时候,将换行符删掉不就可以了吗?来试一试吧

案例1

行内元素span行内元素span行内元素span

案例效果如下:

这种方式虽然可以解决元素之间的空白问题,但是当