---
# System prepended metadata

title: "\U0001F3C5 Day 7 - box-sizing"
tags: [網頁切版直播班 - 2023 夏季班]

---

### content-box

此為 box-sizing 屬性的預設值，width(寬)、height(高) 只包括內容本身的寬高，不包括 border、padding。
舉例：
當有一個 box 設定 `width: 30px; height: 20px; border: 10px solid black;`，
則此 box 總寬高：寬度: 50px, 高度: 40px

### border-box

width(寬)、height(高) 除了內容本身的寬高，還包括 border、padding
舉例：
當有一個 box 設定 `width: 30px; height: 20px; border: 10px solid black; box-sizing: border-box;`，
則此 box 總寬高：寬度: 30px, 高度: 20px

### 題目

請觀看此 [CodePen](https://codepen.io/hexschool/pen/yLvWLZY) 計算 .box1 與 .box2 的寬高（請不要用開發人員工具觀看）

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）
（也可以將答案直接貼至「回報區」）

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答： 
.box1: 寬：338px 高：110px
.box2: 寬：300px 高：110px
-->

### 回報區

---

| # |   Discord      |                                          CodePen / 答案            |
|:--:|:-----------------:|:----------------------------------------------------:|
| 01 |Moreene#6720|[CodePen](https://codepen.io/Moreene/pen/LYXLrxL?editors=1100)|
| 02 |Ann Chou#0146|[CodePen](https://codepen.io/annchou_illu/pen/BaGZVZv)|
| 03 |hebin.|[Codepen](https://codepen.io/landyhsiao776/pen/ExOXRXN)|
| 04 | AYA | [Codepen](https://codepen.io/NoNameNote/pen/Poxjajy) |
| 05 |Atsushi#6888|[Codepen](https://codepen.io/atsushi-amuro/pen/poQwKro?editors=1100)|
| 06 | jhouhank | [Codepen](https://codepen.io/JhouHank/pen/PoxjaKy) |
| 07 | Eden.C |[Codepen](https://codepen.io/iseden/pen/KKrqeyP) |
| 08 | awei | [Codepen](https://codepen.io/hong-wei/pen/jOQwKGg?editors=1100) |
| 09 | cest_jessie | [Codepen](https://codepen.io/itsjessiechen/pen/WNYOydq) |
| 10 | pinyi_9 | [Codepen](https://codepen.io/Wpypy/pen/VwVWdrQ) |
| 11 | 末次 | [Codepen](https://codepen.io/yunjulee/pen/BaGZVdv) |
| 12 | Robert.H | [Codepen](https://codepen.io/Robert1205/pen/LYXLrmO) |
| 13 | billy_ti | [Codepen](https://codepen.io/Ti-Show/pen/XWygYgK?editors=1100) |
| 14 | 銀光菇 | [Codepen](https://codepen.io/genesynthesis/pen/mdQwKjz) |
| 15 | 墨墨#4571 | [Codepen](https://codepen.io/momof2e/pen/bGQRKxP) |
| 16 | Tina02#2691 | [Codepen](https://codepen.io/chjitlox-the-bashful/pen/dyQRKgm) |
| 17 | shawey.1a2b | [Codepen](https://codepen.io/Shawey/pen/MWzoXra) |
| 18 | ann6212 | [Codepen](https://codepen.io/yqmegupa-the-styleful/pen/RwqgJJB?editors=1100) |
| 19 | townyuan | [Codepen](https://codepen.io/townyuan/pen/KKrqeZK) |
| 20 | murphy1665 | [Codepen](https://codepen.io/icephy/pen/WNYOymN?editors=1100) |
| 21 | zhu.lin | [CodePen](https://codepen.io/codepenplayer/pen/zYMzayw) |
| 22 | Kulimusoda | [Codepen](https://codepen.io/yuch3n_chen/pen/dyQRKRZ) |
| 23 | .icesam | [Codepen](https://codepen.io/icesam/pen/WNYOyWb) |
| 24 | xuan#0808 | [Codepen](https://codepen.io/xuan0915/pen/GRwEGbe) |
| 25 | hance__kao | [Codepen](https://codepen.io/HanceKao/pen/dyQRKZJ?editors=1100) |
| 26 | 出事了阿伯#9923 | [CodePen](https://codepen.io/BradpittLai/pen/QWJdyER) |
| 27 | Vic_Liou | [Codepen](https://codepen.io/allenliou-java/pen/NWEgBKP) |
| 28 | DoryH#0526 | [Codepen](https://codepen.io/dorihung/pen/ExOXREW) |
| 29 | Aritan#1931 | [Codepen](https://codepen.io/Aritan/pen/oNQwyOd) |
| 30 | dong2328 | [Codepen](https://codepen.io/htamlkdz-the-encoder/pen/RwqgJXE) |
| 31 | Morning#7336 | [Codepen](https://codepen.io/sxzjnkxs-the-styleful/pen/PoxjaMv?editors=1100) |
| 32 | Calvin | [Codepen](https://codepen.io/CalvinChang/pen/rNQwraw) |
| 33 | Ning#5213 | [Codepen](https://codepen.io/ninghsu/pen/PoxjBPM) |
| 34 | .zack_p | [Codepen](https://codepen.io/Designer-PH/pen/jOQwpqr) |
| 35 | DoDo_6666 | [Codepen](https://codepen.io/MissDouble/pen/zYMzLrP) |
| 36 | SmallP | [Codepen](https://codepen.io/smallp/pen/WNYOyJV) |
| 37 | m_m | [Codepen](https://codepen.io/minnn7716/pen/xxQrzjr) |
| 38 | 阿榮#8277 | [Codepen](https://codepen.io/codeitaday/pen/wvQexyG?editors=1100) |
|39|薯餅|[Codepen](https://codepen.io/ColdingPoTaTo/pen/YzRQjEb)|
| 40 | 路人ADCB#9851 | [Codepen](https://codepen.io/markyourpage/pen/rNQwrqv) |
| 41 | 墨莉 | [Codepen](https://codepen.io/hoku0306/pen/abQwjPQ) |
| 42 | hao2485 | [Codepen](https://codepen.io/Seanfeb16/pen/ExOXprd) |
| 43 | NathanJames#8120 | [Codepen](https://codepen.io/ufo060204/pen/wvQexEz) |
| 44 |阿沁#8176 | [Codepen](https://codepen.io/a8322342/pen/JjeJBzz) |
| 45 |Berlin | [Codepen](https://codepen.io/3qberlin/pen/poQwZKr) |
| 46 |AAAAA | [Codepen](https://codepen.io/yvgxsirf-the-typescripter/pen/ZEmyjjr) |
| 47 | Rochel#4754 | [Codepen](https://codepen.io/rochelwang1205/pen/qBQjyzG) |
| 48 | yun#5213 | [Codepen](https://codepen.io/yun-the-scripter/pen/GRwEXEr) |
| 49 | yuyuyu#1330 | [Codepen](https://codepen.io/yuyu1215/pen/VwVWdoG) |
| 50 | Ting.66#0912 | [Codepen](https://codepen.io/Ting66/pen/YzRQOrW?editors=1100) |
| 51 | 慈玲#8986 | [Codepen](https://codepen.io/vseznpoh-the-flexboxer/pen/rNQwZpb) |
| 52 | Uli | [Codepen](https://codepen.io/uli1313/pen/NWEgLqv) |
| 53 | liam9930 | [Codepen](https://codepen.io/jgnjfvvt-the-lessful/pen/KKrqxBG) |
| 54 | robbie_0830 | [Codepen](https://codepen.io/ShuZhen/pen/zYMzJXx?editors=1100) |
| 55 | 辣椒 | [Codepen](https://codepen.io/chilichen118/pen/rNQwqeV) |
| 56 | 依依 | [Codepen](https://codepen.io/Rita-Yang/pen/jOQwerR) |
| 57 | Qi-Hua | [Codepen](https://codepen.io/emily40830/pen/MWzoPvw) |
| 58 | Cura | [Codepen](https://codepen.io/curalin/pen/bGQRmKy?editors=1100) |
| 59 | Celine | [Codepen](https://codepen.io/celinephoebe/pen/vYQZVKW) |
| 60 | 棠棠 | [Codepen](https://codepen.io/bobo52400/pen/dyQRgLK) |
| 61 | MKL | [Codepen](https://codepen.io/Code-My/pen/ExOXOxw) |
| 62 | adele6199 | [Codepen](https://codepen.io/codepen-io-winnie/pen/xxQryNP) |
| 63 | lychee_kk | [Codepen](https://codepen.io/kakakala/pen/dyQRwWY) |
| 63 | ga771058 | [Codepen](https://codepen.io/ppzigmtg-the-typescripter/pen/RwqgEKR) |
| 64 | jacky7035 | [Codepen](https://codepen.io/adens123/pen/WNYOLJJ) |
| 65 | ming0712 | [Codepen](https://codepen.io/StevenHuang/pen/rNQwPyO) |
| 66 | ROGER | [Codepen](https://codepen.io/jxyrmcxm-the-scripter/pen/WNYOmRw) |
| 67 | hannahTW | [Codepen](https://codepen.io/hangineer/pen/gOQREPJ?editors=1100) |
| 68 | Renee Wang#1437 | [Codepen](https://codepen.io/RENEE-WANG-the-looper/pen/ZEmyZYR)|
| 69 | shuuu | [Codepen](https://codepen.io/afjrvjzl-the-bashful/pen/BaGZEWZ)|
| 70 | yunhsinnnnnnn | [Codepen](https://codepen.io/yun___hsin/pen/rNQwbwP) |
| 71 | mm_ieat | [Codepen](https://codepen.io/MINN3/pen/VwVWNWe) |
| 72 | Paul#7426 | [Codepen](https://codepen.io/paul-1997/pen/GRwELPv?editors=1100) |
| 73 | Brian#7046 | [Codepen](https://codepen.io/PochienTsai/pen/RwqgmNL) |
| 74 | DeLi#8324 | [Codepen](https://codepen.io/delichaomoon/pen/NWEgmmB) |
| 75 | ztion | [Codepen](https://codepen.io/ztion/pen/poQwBmG?editors=1100) |
| 76 | 小夏 | [Codepen](https://codepen.io/michaelhsia/pen/GRwEaoQ) |
| 77 | KevinHuang#0957 | [Codepen](https://codepen.io/qw-huang/pen/oNQwrzP?editors=1100) |
| 78 | fanglin.y | [Codepen](https://codepen.io/flynn841028/pen/BaGZXyp) |
| 79 | MarvinWu#8362 | [Codepen](https://codepen.io/chi-Wu/pen/LYXLwVK) |
| 80 | PH#2731 | [Codepen](https://codepen.io/lokf9527/pen/XWygvmy) |
| 81 | zona_0.0 | [Codepen](https://codepen.io/Zona-Chen/pen/qBQjeqe) |
| 82 |.manmanlai | [Codepen](https://codepen.io/kikiyang/pen/wvQeXEb) |
| 83 |peggydbc1217 | [Codepen](https://codepen.io/peggydbc1217/pen/VwVWoQa) |
| 84 | ct3741 | [Codepen](https://codepen.io/claire-T/pen/rNQwXQE) |
| 85 | wind | [Codepen](https://codepen.io/YuT200053/pen/eYQEOOq) |
| 86 | yu.t_liu | [Codepen](https://codepen.io/wind7y/pen/wvQeVpP) |
| 87 | meowmeow | [Codepen](https://codepen.io/snow1224/pen/dyQRBgL) |
| 88 | JohnC#3814 | [Codepen](https://codepen.io/johnhua25147050/pen/qBQXWbq) |
| 89 | 狸貓#5863 | [Codepen](https://codepen.io/tanuki320/pen/dyQzbov) |
| 90 | Amelia | [Codepen](https://codepen.io/Amelia-chin/pen/poQrzEX) |
| 91 | ivy999 | [Codepen](https://codepen.io/ivy999/pen/gOQxYQQ) |
| 92 | Matic#3173 | [Codepen](https://codepen.io/Matic1124/pen/abQyojJ) |
| 93 | yuchou#5749 | [Codepen](https://codepen.io/yu-chou/pen/MWzvgJg) |
| 94 | 阿富#0389 | [Codepen](https://codepen.io/spring40747/pen/rNQzNWz) |
| 95 | johnchien | [Codepen](https://codepen.io/glqwazid-the-selector/pen/eYQEYgR) |
| 96 | ruchi7866 | [Codepen](https://codepen.io/jason2267/pen/poQroqr) |
| 97 | bf_tsai | [Codepen](https://codepen.io/BF-Tsai/pen/QWJMWJp) |
| 98 | Kai | [Codepen](https://codepen.io/beginneraboutlife116/pen/XWyaWwB) |
| 99 | ss30304#9213 | [Codepen](https://codepen.io/ss30304/pen/eYQEYye) |
| 100 | lianne._. | [Codepen](https://codepen.io/Elaina-L/pen/zYMzxOb) |
| 101 | Cosmos#9210| [Codepen](https://codepen.io/violet7755/pen/dyQzPQX) |
| 102 | 泊岸#3466| [Codepen](https://codepen.io/qoq77416416/pen/RwqZrxG) |
| 103 | kuanju27 | [Codepen](https://codepen.io/Eero-Chiao/pen/vYQJLvg) |
| 104 | runweiting | [Codepen](https://codepen.io/weiting14/pen/XWyadpm) |
| 105 | kimlemon0720 | [Codepen](https://codepen.io/znohmess-the-builder/pen/wvQqGPR) |
| 106 |KC_8685|[Codepen](https://codepen.io/cathy7411/pen/OJajNwr)|
| 107 | shcopy | [Codepen](https://codepen.io/shcopy/pen/JjeyXLN) |
| 108 | Chung#5786 | [Codepen](https://codepen.io/fotdclxz-the-encoder/pen/JjeyKyZ) |
| 109 | elma.yo | [Codepen](https://codepen.io/ElmaYu/pen/yLQoaNv) |
|110|PayRoom#8328|[CodePen](https://codepen.io/water38198/pen/ExOvgNr)
|111| .rainielin| [Codepen](https://codepen.io/Yunchian-Lin/pen/wvYEagd) |
| 112 | celia#9182 | [Codepen](https://codepen.io/celia01/pen/mdQMWrV) |
| 113 |  Ryan Chiang#6649	 | [Codepen](https://codepen.io/ryanchiang/pen/BaGdWxd) 
| 114 | 阿維#2569 | [Codepen](https://codepen.io/iijojpli-the-looper/pen/abQyWrw?editors=1100) |
| 115 | yuling#1634 | [Codepen](https://codepen.io/igzdflpu/pen/jOQwgoQ)|
| 116 | FanJJ#8061 | [Codepen](https://codepen.io/yfchenn/pen/eYQERwM)|
| 117 | randy1746 | [Codepen](https://codepen.io/landy510/pen/ZEmJJVw)|
| 118 | markchen_ | [Codepen](https://codepen.io/Mark-JJchen/pen/ExOvwja)|
| 119 | 歐陽龍龍#1061 | [Codepen](https://codepen.io/dizzydog-rgb/pen/rNQzYvY) |
| 120 | green760223 | [Codepen](https://codepen.io/lawrence-yi-hsuan-chuang/pen/oNQwVOR) |
| 121 | peggy#3169 | [Codepen](https://codepen.io/peggylai/pen/LYXjBOB?editors=1100) |
| 122 | Mylène | [Codepen](https://codepen.io/hamajibashi/pen/bGQrjOp) |
| 123 | Tami | [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/LYXLBPm) |
| 124 | stevenchang421 | [Codepen](https://codepen.io/vwtrpqmm/pen/xxQLaQK)
| 125 | Johnson3669 | [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/KKrvMmg)|
| 126 | 阿賀#3700 | [Codepen](https://codepen.io/sungho/pen/RwqZeEy)|
| 127 | Long | [Codepen](https://codepen.io/Loonng/pen/mdQModG)|
| 128 | patrickpie | [Codepen](https://codepen.io/patrickpie/pen/qBQXwJB) |
| 129 | lishuan | [Codepen](https://codepen.io/lishuan/pen/PoxKrpg) |
| 130 | csh97 | [Codepen](https://codepen.io/pyrbkvev-the-animator/pen/xxQXxKd) |
| 131 | RX00#5351 | [Codepen](https://codepen.io/llqzknqv-the-styleful/pen/jOQGPMQ) |
| 132 | bbbear#7545 | [Codepen](https://codepen.io/Bearice/pen/dyQVowV?editors=1100) |
| 133 | homer#1525 | [Codepen](https://codepen.io/Buckhorn/pen/JjerdEG) |
| 134 | Lesly#1279 | [Codepen](https://codepen.io/LeslyChang/pen/GRwMoVW) |
| 135 | ryan.chou | [Codepen](https://codepen.io/csw8524/pen/dyQVOyM) |
| 136 | vivianlu_ | [Codepen](https://codepen.io/viviannlu/pen/MWzEJNv) |
| 137 | Kimi #9564 | [Codepen](https://codepen.io/kimihu91/pen/gOQgjEX)| 
| 138 | soniawu | [Codepen](https://codepen.io/YUJOU/pen/LYXzjgP?editors=1100)| 
| 139 | icy.moo | [Codepen](https://codepen.io/len5464/pen/YzRrrbY?editors=1100) |
| 140 | 0naomi0 | [Codepen](https://codepen.io/0Naomi0/pen/GRwMXQo) |
| 141 | albee#9121 | [Codepen](https://codepen.io/albee-chang/pen/poQWGvZ)|
| 142 | janshawn | [Codepen](https://codepen.io/Janshawn/pen/xxQXWpP)|
| 143 | rjjq | [Codepen](https://codepen.io/rjjq/pen/PoxOweN) |
| 144 | heyiiiii#5013 | [Codepen](https://codepen.io/hoyii/pen/RwqjVpo) |
| 145 | 莉塔#8500 | [Codepen](https://codepen.io/RitaWeng/pen/dyQZRGz?editors=1100) |
| 146 | .dtou | [Codepen](https://codepen.io/conlyvrg-the-reactor/pen/YzRExZM) |
| 147 | .elliehsu | [Codepen](https://codepen.io/ellieyuhsu0827/pen/ZEmaJZR) |
| 148 | littlewhite2406 | [Codepen](https://codepen.io/gracewhite/pen/KKryQgR?editors=1100) |
| 149 | WA | [Codepen](https://codepen.io/ldddl/pen/yLQpvYp) |
| 150 | andersonshen | [Codepen](https://codepen.io/luxyenni-the-bold/pen/LYXeQNo) |
| 151 | SKey#9905 | [Codepen](https://codepen.io/Dale-Chien/pen/NWEXYyo) |
| 152 | Jim0.0#3073 | [Codepen](https://codepen.io/asiahedh-the-encoder/pen/BaGYoKY) |
| 153 | swalok47716#7332 | [Codepen](https://codepen.io/swalok/pen/VwVQvdz) |
| 154 | stoos_1369 | [Codepen](https://codepen.io/Stooss/pen/yLQvJbr)|
| 155 | 郭芙蘭#6374 | [Codepen](https://codepen.io/flora_Kuo/pen/YzReZyL?editors=1100)|
| 155 | marskuo | [Codepen](https://codepen.io/MarsKuo/pen/XWyZqrd)|
| 156 | 舜仁 | [Codepen](https://codepen.io/randomno/pen/dyQmeyW)|
| 157 | 博派變形金剛#0959 | [Codepen](https://codepen.io/chan-chen/pen/MWzOXdd) |
| 158 | hironaka | [Codepen](https://codepen.io/Hironaka0815/pen/PoxRaxN) |
| 160 | jhen_ye | [Codepen](https://codepen.io/su-jhen/pen/rNQdbbj) |
| 161 | Eileen#6454 | [Codepen](https://codepen.io/Eileen-io/pen/poQVqVM) |
| 162 | MaciHuang#8798 | [Codepen](https://codepen.io/macy1215/pen/OJaELyq) |
| 163 | yuan2781 | [Codepen](https://codepen.io/ismebir/pen/NWEzROo) |
| 164 | cyrus_li | [Codepen](https://codepen.io/likahang/pen/vYQaBJa) |
| 165 | lin_lion | [Codepen](https://codepen.io/Lion-Lin/pen/YzRJLJX) |
| 166 | 圈圈 | [Codepen](https://codepen.io/wjejfczn-the-bold/pen/xxQQPaX) |
| 167 | CSQR#3308 | [Codepen](https://codepen.io/ChrisSQR/pen/eYQXNmG) |
| 168 | Azi Hsieh#2861 | [Codepen](https://codepen.io/AziHsieh/pen/abPZoNJ) |
| 169 | Mia小福#4473 | [Codepen](https://codepen.io/a0950271/pen/XWoVWPY?editors=1100) |
| 170 | 楓 | [Codepen](https://codepen.io/maplestartend/pen/XWGWYNq) |
<!-- 
- 快速複製格式：
| 0 | user | [Codepen]() |
-->

