Display: Block Inside Display: Inline

雖然問題提出了display:inline 父級中的display:block 元素的場景，根本問題是在這種情況下這兩個顯示值之間的差異。

根據 CSS 2.1 規範，當行內元素包含區塊元素時，行內框會在區塊周圍被破壞。圍繞區塊前後的內聯內容創建匿名區塊框，並且該區塊成為這些匿名框的同級。

這會產生一個結構，其中父元素（即使它被定義為顯示）：內聯，由於 display:block 子級的存在而表現不同。父元素實際上成為包含匿名區塊框的區塊框。
• 顯示：內聯與顯示：塊父元素之間的差異
• 儘管結構相似，但存在細微差別此場景中display:inline 和display:block父元素之間的差異：
• 內容流： 內聯元素隨文本水平流動，而塊元素垂直流動。圍繞內聯父元素創建的匿名塊框允許垂直堆疊子元素，模擬塊行為。
• 匿名區塊框產生： Display:inline 導致為與子區塊相鄰的內聯內容。這與 display:block 父元素的情況不同，其中整個父元素變成了塊框。

邊框處理： CSS 2.1 規範指出某些屬性，例如邊框、仍適用於產生匿名區塊框的元素。因此，帶有邊框的 display:inline 父級將在匿名區塊框周圍繪製邊框，從而在換行符號處建立開放邊框。相反，帶有邊框的 display:block 父級將在整個區塊框周圍有一個閉合邊框。

文本環繞： 內聯元素自然地將文本環繞在它們周圍。在這種情況下，內聯內容周圍的匿名區塊框會阻止文字環繞區塊子元素，就好像父元素是 display:block 元素一樣。