# 關於 Box model (盒模型) - box model 的重要性: 可以了解元素的實際寬、高度，有利於對排版上的認知 - 影響元素的寬、高的屬性有哪些? `element` 自身、`padding`、`border` - 從範例來了解: 首先，我們先來撰寫一段程式碼: HTML: ``` <body> <div class="box"></div> </body> ``` CSS: ``` .box { width: 300px; height: 300px; background: #000; } ``` 會產生一個寬高皆為 300px 的黑色正方形: ![](https://i.imgur.com/hCqweHa.png) - 假設我們在 .box 下一段語法: padding-top: +30px; 此時實際 .box的高度會是多少? ``` .box { width: 300px; height: 300px; background: #000; padding-top: 30px; } ``` ![](https://i.imgur.com/R9sdFDc.png) - 答案是: 高度會變成 330px，由右邊的盒模型我們可以發現高度因為 padding的關係，外向內推擠了30px出來 `300(.box) + 30(padding) = 330px` - 如果把 padding-top: 30px 改成 → padding: 50px，寬高會是多少? ``` .box { width: 300px; height: 300px; background: #000; padding-top: 50px; } ``` - 答案是: 寬&高 = 400px ![](https://i.imgur.com/NPn7LSt.png) 原因是為什麼? 因為 element .box 本身是 300px 而 `padding: 50px;` 表示我的上下左右皆會增加 50px; 寬: 300px + 50px + 50px → 得到了 400px - 再增加一個 10px 實心的藍線，寬高會是多少呢? ``` .box { width: 300px; height: 300px; background: #000; padding: 50px; border: 10px solid blue; /* 420 */ } ``` 聰明的妳，應該就知道，此時的的 .box = 420px ![](https://i.imgur.com/iVSSOjm.png) `(.box) 300px + (padding) 50px+50px + (border) 10px+10px = 20px` ----------------------------------------------------- - margin 不影響物件本身的寬高的計算: 複製一個 .box ``` <body> <div class="box"></div> <div class="box"></div> </body> ``` CSS，.box撰寫一個 margin-bottom: 30px ``` .box { width: 300px; height: 300px; background: #000; padding: 50px; border: 10px solid blue; margin-bottom: 30px; } ``` ![](https://i.imgur.com/6IZqbWk.png) 可以發現我們 .box 的盒模型瀏覽下，**寬高並沒有改變** 原因就是，box model，僅會計算: `element` 自身、`padding`、`border` 而 **margin** 並不會列入 - 注意，雖然它並不會針對物件列入寬高計算，但實際上還是存在於網頁上的間距。 - 將高度給拿掉的話呢? 寬高會變成多少? 答案是: 高度 = 120px; ![](https://i.imgur.com/UenD4hM.png) 可以觀察 box-model，它的高度是怎麼來的: ![](https://i.imgur.com/Lgbwf35.png) 由: padding 50+50 = 100 , border 10+10 = 20 物件本身沒寫高度，故受屬性影響下 = 120px ------------------------------------------------- - 再box 內傳寫一個 p 段落，載入一串文字下，高度又會是多少? ``` <div class="box"> <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Natus facere id voluptatem modi pariatur corporis laborum omnis aperiam ea tempora explicabo, numquam eum iusto placeat, itaque ipsa temporibus, nemo nulla reprehenderit quae distinctio magni. Dolorum blanditiis aliquid voluptatibus nostrum! Sit! </p> </div> ``` 這邊我們用 lorem 來產生40個假字 以 box-model 來瀏覽: 得知文字段落本身的高度是 `112px` ![](https://i.imgur.com/x9rsMnA.png) 那這樣.box目前當下的高度會是多少? ![](https://i.imgur.com/FwFtNZl.png) A: 112 + 50+50 + 10+10 = 232px; ![](https://i.imgur.com/nLDqkhR.png) 由上述範例，實際操演之後就可以更加瞭解 - box-model 的觀念了 ###### tags: `HTML、CSS`