身為前端開發人員，了解 CSS 盒子模型是成敗的關鍵，以便能夠提供像素完美的佈局。讓我們深入討論內聯元素和區塊元素在兩種盒子模型類型（內容盒和邊框盒）的上下文中的行為有何不同。

基礎：盒子裡有什麼？

在我們詳細討論之前，有必要回顧一下盒子模型是什麼。頁面上的每個元素都是一個盒子（是的，即使是那些實際上看起來不是四方形的元素）。盒子可以位於其他盒子內、包含其他盒子和/或與其他盒子並排。

盒子模型適用於所有這些，並由以下部分組成：

• 內容方塊： 一個 HTML 元素或 CSS 偽元素，其中包含您的實際內容 - 文字、圖像、您擁有的內容。
• 內邊距： 內容與邊框之間的空間。
• 邊框： 圍繞內邊距和內容的線條。
• 邊距： 邊框外的空間，將其他元素推開。

因此，幾乎每個 HTML 元素（包括

內聯元素和區塊元素之間的主要區別

了解盒子模型如何影響內聯元素與塊元素的主要區別至關重要：

1. 寬度： 預設情況下，區塊元素會展開以填滿其容器。內聯元素？它們只佔用足夠的空間來容納其內容。

2. 高度：對於區塊元素，padding、border、margin都會增加高度。無論垂直內邊距或邊框如何，內聯元素都保持在行高內。

3. 佈局影響：塊元素影響水平和垂直佈局。內聯元素都是關於水平流動的，對垂直間距的影響最小。

4. 邊距折疊： 邊距折疊是一種特定於塊元素的行為，其中相鄰的垂直邊距可以合併（因此一個元素上的margin-bottom:20px 可以折疊為margin-top： 20px 在下面的元素上，建立一個20px 邊距）。內聯元素不玩這個遊戲。

現在我們知道了盒子模型的組成部分以及內聯元素和塊元素之間的區別，讓我們看看內容框如何根據它們是內聯元素還是塊元素而受到 box-sizing 屬性的影響。

框大小調整：內容框與邊框框

box-sizing 屬性控制如何計算元素的寬度和高度，它可以顯著影響佈局。

1. 帶有內嵌元素的內容框

當 box-sizing: content-box 應用於內嵌元素時：

• 寬度與高度：寬度僅由內容決定。內邊距、邊框和邊距會新增在此寬度之上。
• 佈局影響：由於內聯元素不會破壞文字流，因此元素的寬度僅與內容一樣寬。垂直內邊距和邊框在視覺上存在，但不會影響周圍線條的高度。

2. 帶有區塊元素的內容框

當 box-sizing: content-box 套用於區塊元素時：

• 寬度與高度：指定的寬度或高度僅適用於內容區域。在其外部添加填充和邊框，增加元素的整體大小。
• 佈局影響：除非另有指定，否則區塊元素預設擴展到其容器的整個寬度。填充和邊框會增加元素的大小，並將相鄰元素推得更遠。

3. 帶有內聯元素的邊框

當 box-sizing: border-box 應用於內聯元素：

• 寬度和高度： 寬度包括內容、內邊距和邊框。內容區域縮小以容納指定寬度內的內邊距和邊框。
• 佈局影響：元素的寬度仍然由內容決定，但現在內邊距和邊框都包含在該寬度內。垂直內邊距和邊框在視覺上仍然存在，但不會改變行高。

4. 帶有區塊元素的邊框

當 box-sizing: border-box 套用於區塊元素時：

• 寬度和高度：指定的寬度和高度包括內容、內邊距和邊框。這意味著無論添加多少內邊距或邊框，元素的總大小都與指定的尺寸保持一致。
• 佈局影響：區塊元素的大小更容易預測，因為內邊距和邊框包含在指定的寬度內。這使得佈局設計更易於管理，特別是在並排對齊元素時。

值得一提的是，雖然 content-box 是預設設置，但 border-box 被廣泛認為更直觀並提供最大程度的控制。

CSS 盒子模型不僅僅是一個強大的概念，它也是前端開發工具庫中的基礎工具。透過了解框架大小如何以不同的方式影響內聯和區塊元素，您可以開始創建既清晰又實用的完美佈局，而無需為錯誤佈局進行故障排除而煩惱。

如果您喜歡盒子模型上的下載，請將滑鼠懸停在左上角的心形盒子上，並向這篇文章展示所有的愛！