CSS 盒模型視覺化
免費線上 CSS 盒模型視覺化工具。拖曳 margin、border、padding、content 即時看層層變化，徹底搞懂 content-box 與 border-box 的差異。
CSS 盒模型視覺化
免費線上 CSS 盒模型視覺化工具。拖曳 margin、border、padding、content 即時看層層變化，徹底搞懂 content-box 與 border-box 的差異。
關於 CSS 盒模型
每個元素都是四層包覆
由內而外，一個元素依序是 content、padding、border、margin。content 放文字或子元素；padding 是邊框內側的留白；border 包住 padding；margin 把相鄰元素推開。本工具把四層都畫出來，讓你看見每個屬性如何加大元素的佔位。
content-box 與 border-box 的差別
content-box（預設）下，width 只設定 content，padding 與 border 往外加，所以元素最後比你設的 width 更寬。border-box 下，width 指的是 border-box，padding 與 border 從內側扣掉，content 因此縮小。在這裡切換兩種模式，看同一個 width 產生兩種不同佔位。
常見問題
關於這個主題的常見疑問與實用解答。
什麼是 CSS 盒模型？
它是瀏覽器決定每個元素大小的方式：四層包覆——content、padding、border、margin。搞懂它，幾乎所有排版意外都能解釋。
我設了 width，元素卻更寬，為什麼？
在預設的 content-box 模式下，padding 與 border 會加在 width 之外。改用 border-box 讓 width 包含 padding 與 border，或用本工具看確切數字。
我的資料會被傳送到伺服器嗎？
不會。所有盒模型計算完全在你的瀏覽器中執行，你輸入的任何內容都不會離開你的裝置。