<h1>基礎文檔流</h1><p>我是一個基本的塊級元素。我的相鄰塊級元素在我的下方另起一行。</p><p>默認情況下，我們會占據父元素 100%的寬度，并且我們的高度與我們的子元素內容一樣高。我們的總寬度和高度是我們的內容+ 內邊距 + 邊框寬度/高度。
</p><p>我們以我們的外邊距分隔。由于外邊距折疊，我們以其中一個外邊距的寬度（如果兩個的外邊距不相同，以更大的為準）分隔，而不是兩個。
</p><p>如果在同一行上足夠的空間，行級元素（如<span>這個</span>和<span>這個</span>），那么它們將與相鄰的文本節點將會一起放置在同一行上。如果行級元素溢出，<span>那么它們將會換行，就像這個包含文本的行級元素一樣</span>，或者如果沒有足夠的空間，那么它們將會換到新的一行，就像這個圖片一樣：<img src="long.jpg" alt="snippet of cloth" />
</p>

body {width: 500px;margin: 0 auto;
}p {background: rgba(255, 84, 104, 0.3);border: 2px solid rgb(255, 84, 104);padding: 10px;margin: 10px;
}span {background: white;border: 1px solid black;
}