2024-12-11《元素块级和行内》

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

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

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

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

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

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

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

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

案例1

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