html 文档流的理解 normal flow

https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Normal_Flow

https://zhuanlan.zhihu.com/p/31261020

块级和内联：（宏观用块级，微观用内敛）

(block)块级： div p

(inline)内联： img span

例如：

<span class="inline">hello</span>
<span class="inline">world</span>
<div class="block">
hello world
</div>

span是内联元素，div是块级元素，增加边框：

.inline{
border:1px solid #ccc;
}
.block{
border:1px solid #ccc;
}

可以看到内联元素是有空格分割的，块级元素是没有空格分割的：

就算是在内联元素的外部增加元素，也还是会用边框分割：

<span class="inline">hello</span>
<span class="inline">world</span>
hello
<div class="block">
hello world
</div>

看到的是：

另外就算是增加了内外的边距（margin padding）也不会影响内联元素的空格分割。

嵌套的内联元素不会被空格分割，但是增加了新的 内敛元素就会被其他内联元素以空格分割。