---
---
tags: 軟體工程師體驗營 - 2024
---

# 🏅 切版任務 Day4 - HTML、CSS 文字設定與 margin、padding 運用
## 問題

### 1. 重要觀念選擇題
根據下列同樣的 A、B 模式，以 HTML 與 CSS 觀念中， HTML 決定了網頁的『架構』、CSS 形成網頁『樣式』，請問 A、B 各自最接近 HTML、CSS 差異描述，各為哪個?

1-- A 圖為 HTML，B 圖為 CSS
2-- A 圖為 CSS，B 圖為 HTML
3-- 他只是一隻尖叫的章魚，騙不了我((不可以選這個!))

　　　　　　

---
### 2. 文字、間距相關運用
用 Codepen 練習下列的文字版面，練習文字相關尺寸設定、間距與相關 padding、margin 等運用。（可複製下方提供的文字練習）

> [圖片連結](https://i.imgur.com/tAJAG6m.png)

內文文字與文字資訊提供如下：

六角學院

> 文字大小：`32px` `bold`｜顏色：`#000000`｜行高：`1.5` 倍

軟體工程師體驗營 - 一個月帶你做出網頁作品

> 文字大小：`24px` `bold`｜顏色：`#000000`｜行高：`1.5` 倍

（第一段）
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt nostrum neque ipsam velit quibusdam delectus praesentium aut necessitatibus! Exercitationem, aperiam!

（第二段）
Mickey Mouse would have to be the main figure. Yet some mention must be made of our great animated classics. I made sketches of all the characters I thought should appear. Then, I called upon my modeling skills to build a one-16th-inch scale paper cut-out model of what I wanted. This was before photo-copying machines with reducing capabilities, so I had to make all the drawings in scale. Many of the figures had to be drawn, a quarter-inch high. The entire set was about 18-inches long by 3.5-inches high. But this model was a good tool for planning the show sequence and experimenting with different scenes.

> 文字大小：`20px`｜顏色：`#000000`、`#cd5e3c`｜行高：`1.5` 倍｜首行縮排：`36px`｜
橘色字為 `bold`

（右下連結）
前往頁面

> 寬度：`120px`｜文字置中｜文字大小：`16px`｜文字顏色：`#ffffff`｜行高：`1.5` 倍｜背景顏色：`#000000`
> hover 時：背景顏色：`#cd5e3c`

## 回報流程

1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）


<!--

解答：
1. 2
2. https://codepen.io/hexschool/pen/jOvJvWW

-->

回報區
---

| 報數 | Discord 名字 | Codepen／其他回饋 |
|:----:|:---------------:|:------------------------------------------------------------------------------------:|
| 1 | Meng | **1.** 2 ／ **2.** [Codepen](https://codepen.io/menglin1203/pen/GRLLazO) |
| 2 | zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/BaEEeMx) |
| 3 | Michelle0417 | [Codepen](https://codepen.io/michelle0417/pen/vYMMqOW) |
| 4 | Larry | **1.** 2 ／ **2.** [Codepen](https://codepen.io/larrylinr5/pen/JjVVqzX?editors=1100) |
| 5 | LGJason | [Codepen](https://codepen.io/j811108/pen/OJGGYKE) |
| 6 | jerry | [Codepen](https://codepen.io/sony791210/pen/QWPPRRz) |
| 7 | Chen | [Codepen](https://codepen.io/yingchangchen/pen/JjVVQLy) |
| 8 | Hailey | [Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/yLrrdRO) |
| 9 | 阿若 | [Codepen](https://codepen.io/skar5268/pen/JjVVQwM) |
| 10 | Emma | [Codepen](https://codepen.io/huang_L/pen/abxxgjw) |
| 11 | 阿呆 | [Codepen](https://codepen.io/rvnktrxb-the-reactor/pen/NWmmQqG) |
| 12 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/mdggZjz) |
| 13 | Chingya | [Codepen](https://codepen.io/chingya1214/pen/ZEZZdmp) |
| 14 | Kai | [Codepen](https://codepen.io/imkaikai9997874/pen/OJGGKXJ?editors=1100) |
| 15 | tim | [Codepen](https://codepen.io/jskrtivy-the-animator/pen/rNbbEEm) |
| 16 | DoryH | [Codepen]() |
| 17 | Daphne | [Codepen](https://codepen.io/DaphneShen/pen/KKYYjgO?editors=0100) |
| 18 | Sammy | [Codepen](https://codepen.io/fsczdlla-the-bold/pen/vYMMwbZ) |
| 19 | brucelee0629 | [Codepen](https://codepen.io/xxhdklwi-the-decoder/pen/NWmmQrx?editors=1100) |
| 20 | Yuwen | [Codepen](https://codepen.io/Yuwen-the-reactor/pen/VwNNoQO) |
| 21 | mike_2049 | [Codepen](https://codepen.io/mike2049/pen/BaEEgpG?editors=1100) |
| 22 | 白白 | [Codepen](https://codepen.io/YuBai/pen/VwNNoMN?editors=1100) |
| 23 | Amy(咂摳) | [Codepen](https://codepen.io/nnxucgmc-the-builder/pen/vYMMoZw?editors=1100) |
| 24 | 詹姆士 | [Codepen](https://codepen.io/z111048/pen/OJGGeRB?editors=1100) |
| 25 | Tanyaaaa | [Codepen](https://codepen.io/tanya77777/pen/wvZZVJK) |
| 25 | Chia Pin | [Codepen](https://codepen.io/joker-cat/pen/wvZbwGq) |
| 26 | Mionne | [Codepen](https://codepen.io/neohyntw/pen/gOyyVyr) |
| 27 | yicheng | [Codepen](https://codepen.io/YiChengCHANG/pen/vYMwBxK) |
| 28 | yunyouob | [Codepen](https://codepen.io/ozkkvlsu-the-animator/pen/jORRodX?editors=1100) |
| 29 | Ana | [Codepen](https://codepen.io/Ana-Wu/pen/QWPPePM) |
| 30 | Peggy | **1.** 2 ／ **2.** [Codepen](https://codepen.io/peggy0419/pen/mdggNXd) |
| 31 | Joey一針 | **1.** 2 ／ **2.** [Codepen](https://codepen.io/joeychou/pen/NWmVKwY) |
| 32 | WEIWEI | [Codepen](https://codepen.io/weiwei93/pen/BaEeBrJ) |
| 33 | 紫珩 | [Codepen](https://codepen.io/tzhengliin/pen/rNbgBPB) |
| 34 | LYC | [Codepen](https://codepen.io/LY-C/pen/gOyJYbw) |
| 35 | Elva Su | 1.2 [Codepen](https://codepen.io/evensu_/pen/eYoowGZ?editors=1100) |
| 36 | zuien1120 | [Codepen](https://codepen.io/anki0072011/pen/YzMMmeo) |
| 37 | Daisy Li | [Codepen](https://codepen.io/lidairong-gmail-com/pen/jORRjMj?editors=1100) |
| 38 | Casey | [Codepen](https://codepen.io/Caseyyyyyyyyyyyyyy/pen/dyLEbqp) |
| 39 | Rio | [CodePen](https://codepen.io/wei_wu/pen/YzMbzYa) |
| 40 | 小趴 | [Codepen](https://codepen.io/papa2415/pen/poBmzRZ) |
| 41 | CrystalLala | [Codepen](https://codepen.io/crystallala/pen/yLrWBqZ) |
| 42 | damon0323 | [Codepen](https://codepen.io/swk9eny2/pen/PogvoBV?editors=1100) |
| 43 | yuling | [Codepen](https://codepen.io/igzdflpu/pen/mdggNBb) |
| 44 | Winnie | [Codepen](https://codepen.io/codepen-io-winnie/pen/NWmmQNx?editors=1100) |
| 45 | liugod3824🔥 | [Codepen](https://codepen.io/kjssvtkr-the-animator/pen/ZEZNYQK)✔ |
| 46 | Eden | [Codepen](https://codepen.io/iseden/pen/MWRdWpY) |
| 47 | Sana | [Codepen](https://codepen.io/-Chouno/pen/NWmVKNw) |
| 48 | boin | 1.2 [Codepen](https://codepen.io/boinji/pen/mdggNVY) |
| 49 | 真真瑋瑋 | 1.**2**/2.[Codepen](https://codepen.io/Yujhen-Li/pen/LYvoEra?editors=1100) |
| 50 | sylviabuy | 1.**2**/2.[Codepen](https://codepen.io/sylviabela/pen/eYoaNZQ) |
| 51 | Lauren | [Codepen](https://codepen.io/Lauren8/pen/XWQQwGW?editors=1100) |
| 52 | TTedd | 2 / [Codepen](https://codepen.io/TTedd/pen/VwNOYWR?editors=1100) |
| 53 | Aust1n | [Codepen](https://codepen.io/AustinYEH/pen/ZEZNYWy?editors=1100) |
| 54 | Six | [Codepen](https://codepen.io/Max-kuo/pen/yLrWyQp?editors=1100) |
| 55 | Chewsday | [Codepen](https://codepen.io/Chewsday/pen/zYXQxzW?editors=1000) |
| 56 | Mika | [Codepen](https://codepen.io/shumtzhz-the-encoder/pen/XWQQLGR) |
| 57 | 邵 | [Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/XWQwJra) |
| 58 | Ellie | 2 / [Codepen](https://codepen.io/Ellie-Chiang/pen/LYvvGpX) |
| 59 | 阿宸 | 2 / [Codepen](https://codepen.io/xnocndjt-the-sans/pen/OJGYLWg?editors=1100) |
| 60 | anderson | 2 / [Codepen](https://codepen.io/goodmanbuild/pen/RwOmaNr) |
| 61 | KUN. | 1.3/2. [Codepen](https://codepen.io/barry91205/pen/MWRdKNG) |
| 62 | Kaya | **1.** 2/**2**. [Codepen](https://codepen.io/kayaribi/pen/NWmVNVL) |
| 63 | sweewei | [Codepen](https://codepen.io/sweewei-Law/pen/yLrWOzR) |
| 64 | 薛逢 | [Codepen](https://codepen.io/vogqyrrj-the-selector/pen/gOyJPqP) |
| 65 | 小米 | [Codepen](https://codepen.io/hlgudwue-the-typescripter/pen/qBwGZrB) |
| 66 | s870012 | [Codepen](https://codepen.io/idzrvbnl-the-bashful/pen/OJGYXRo?editors=1100) |
| 67 | JESS | **1.** 2/**2**. [Codepen](https://codepen.io/-8412/pen/QWPRypK) |
| 68 | Guan(yangguan.) | **1.** 2／**2.**[Codepen](https://codepen.io/Yang-guan/pen/poBmbmy) |
| 69 | Anna | [Codepen](https://codepen.io/Anna-Teng/pen/RwOmRKQ) |
| 70 | 黛Dye | [Codepen](https://codepen.io/Dye_Note/pen/YzMbWwr) |
| 71 | hongru-LyNn | [Codepen](https://codepen.io/LyNnYWu/pen/RwOmRve) |
| 72 | MY | [Codepen](https://codepen.io/ahmomoz/pen/MWRdyMM) |
| 73 | Tough life | [Codepen](https://codepen.io/hakuei0115/pen/PogvzPe) |
| 74 | 閆安 | [Codepen](https://codepen.io/yanann7777/pen/dyLEGmL) |
| 75 | Maxine | [Codepen](https://codepen.io/Maxine0713/pen/dyLEpGg) |
| 76 | 快樂小豬 | [Codepen](https://codepen.io/rtjowfyf-the-lessful/pen/OJGYyOr) |
| 77 | JIAWUN | [Codepen](https://codepen.io/wkasixgv-the-sasster/pen/oNORjJq) |
| 78 | JUN_ | [Codepen](https://codepen.io/Jun-L/pen/bGJywpd) |
| 79 | qet1717 | [Codepen](https://codepen.io/yizukwgs-the-flexboxer/pen/GRLajLp) |
| 80 | Ching | [CodePen](https://codepen.io/huangching/pen/mdgYrPg) |
| 81 | LiLiLiLi | [CodePen](https://codepen.io/jungang0414/pen/ZEZNQzL?editors=1100) |
| 82 | 勾小勻 | **1.** 2/**2.** [Codepen](https://codepen.io/qkvyujcc-the-encoder/pen/jORoMZB) |
| 83 | leo.chang | [Codepen](https://codepen.io/s16777216/pen/eYoadMy) |
| 84 | lele | [Codepen](https://codepen.io/Wpypy/pen/wvZbzQz) |
| 85 | Antonio | [Codepen](https://codepen.io/gwhvusel-the-builder/pen/zYXQBVz) |
| 86 | hsiehmo16 | [Codepen](https://codepen.io/mohsieh/pen/vYMwyZK) |
| 87 | jamesct34| [Codepen](https://codepen.io/JCT34/pen/PogvGaP) |
| 88 | yu.t_liu| [Codepen](https://codepen.io/YuT200053/pen/RwOmooR?editors=1100) |
| 89 | ninii傳教士| [Codepen](https://codepen.io/niiniiii/pen/KKYLVZm?editors=1100) |
| 90 | FURUTO| [Codepen](https://codepen.io/oditudnw-the-flexboxer/pen/JjVqEjK) |
| 91 | 嵬 | [Codepen](https://codepen.io/Obivld/pen/ZEZNYLJ) |
| 92 | 黛西 |[Codepen](https://codepen.io/ChiashengLin/pen/rNbgWEB) |
| 93| Camila | 2 / [Codepen](https://codepen.io/camilalo/pen/mdggNmN) |
| 94| MDFK | [Codepen](https://codepen.io/aqcrrhwb/pen/QWPPRzJ?editors=1100) |
| 95| Zander | [Codepen](https://codepen.io/chuangmaster/pen/bGJypZK) |
| 96| Jiahe | [Codepen](https://codepen.io/Andywang-95/pen/MWRdpzr?editors=1100) |
| 97 | Maca | [CodePen](https://codepen.io/uimaca/pen/oNORGoX?editors=0100) |
| 98 | macihuang | [CodePen](https://codepen.io/macy1215/pen/OJGYxvj) |
| 99 | Toung | [Codepen](https://codepen.io/Toung/pen/KKYYOzN) |
| 100 | Andy_12 | [Codepen](https://codepen.io/lifann/pen/vYMwWZp?editors=1100) |
| 101 | 秀 | [Codepen](https://codepen.io/Alyssa-CHEN-the-bashful/pen/zYXQPJN) |
| 102 | Frank Chiang | [Codepen](https://codepen.io/frankchiang/pen/wvZbqjG) |
| 103 | erichsu0406 | [Codepen](https://codepen.io/esxwvufg-the-flexboxer/pen/gOyJogN) |
| 104 | jami_37521 | [Codepen](https://codepen.io/jamiHexo/pen/yLrWPJd) |
| 105 |ㄚ華| [Codepen](https://codepen.io/rzzuehiv-the-vuer/pen/poBmyRK) |
| 106 | 禮央 (れお) | [CodePen](https://codepen.io/J-Y-P/pen/WNWBOvY) |
| 107 | Rayne | [Codepen](https://codepen.io/Kelsier/pen/rNbgpLw?editors=1100) |
| 108 | kebukeyi | [Codepen](https://codepen.io/kebukeyi/pen/QWPRQvQ) |
| 109 | Mango | 1. (2) 2.[Codepen](https://codepen.io/Mangotsai/pen/JjVqoOm)
| 110 | QOO | [Codepen](https://codepen.io/QOOQOOQ/pen/dyLEXoW?editors=1100) |
| 111 | Jenny L | [Codepen](https://codepen.io/lesley0029/pen/YzMbaja?editors=1100)
| 112 | Jenny_7314 |1.2 [Codepen](https://codepen.io/Jenny_000/pen/dyLEMOo) |
| 113 | JY |[Codepen](https://codepen.io/jylee0805/pen/poBmVYW?editors=1100) |
| 114 | Jennifer|[Codepen](https://codepen.io/yujhen/pen/YzMbjGx) |
| 115 | jamesct34|[Codepen](https://codepen.io/JCT34/pen/PogvGaP) |
| 116 | Schnauzer | 2 / [Codepen](https://codepen.io/Cocker-Spaniel/pen/rNbgZMw)|
| 117 | Haley | [Codepen](https://codepen.io/wsx3690/pen/oNORjvB?editors=1100)
| 118 | Ed Huang | [Codepen](https://codepen.io/yide1986/pen/mdgYzmE?editors=1100)
| 119 | Angela_la | [Codepen](https://codepen.io/Angela-the-builder/pen/wvZZLVw?editors=1100) |
| 120 | emmayo | **1.** 2/**2**. [Codepen](https://codepen.io/emmayo/pen/LYvoKVZ) |
| 121 | Kasie | 1.2 / 2.[Codepen](https://codepen.io/KasieL/pen/dyLEoRG?editors=1100) |
|122 | spadegun | 1、2 / 2、[Codepen](https://codepen.io/spadegun/pen/rNbgXxy) |
|123 | 婉玲Dacy | [Codepen](https://codepen.io/xxaynqoq-the-animator/pen/vYMwdpK?editors=1100) |
| 124 | kevinwen2104 | [Codepen](https://codepen.io/wenwoo/pen/JjVQPrQ) |
| 125 | emmazhang. | 1、2 / 2、[Codepen](https://codepen.io/zhangemma/pen/mdgZJKO?editors=1100) |
|126|aoya9155|1.2 / 2. [Codepen](https://codepen.io/aoya2139/pen/WNWqQMm)|
|126|Linfe| 1.2 / 2. [Codepen](https://codepen.io/Linfe/pen/abxgdLq)|
|127| oyll | [Codepen](https://codepen.io/dizzydog-rgb/pen/YzMowxR)|
|128|ss585801| 1.2 / 2. [Codepen](https://codepen.io/ss585801/pen/qBwGzQX?editors=1100)|
|129|CC_meowmeow| 1.2 / 2. [Codepen](https://codepen.io/ss585801/pen/abxxgjw)|
|129|.zack_p| 1.2 / 2. [Codepen](https://codepen.io/Designer-PH/pen/wvZLdVp)|
|130|Ran|[Codepen](https://codepen.io/Ran-Ran-the-typescripter/pen/BaEgZEv)|
|131|oldan|1.2 / 2. [Codepen](https://codepen.io/Enix-Chien-/pen/rNbEYBg)|
|132|erwinchiang|1.2 / 2. [Codepen](https://codepen.io/vsujlkjy-the-scripter/pen/qBwzVqZ)|
|133|kawa|[Codepen](https://codepen.io/z83xji6/pen/GRLbgPK?editors=1100)
|134|達達|[Codepen](https://codepen.io/Adam-Tsai/pen/rNbEREx)
|135|jerry_66983|1.2/2.[Codepen](https://codepen.io/Barry-C/pen/yLrdrRg?editors=1100)
|136|asabulu_von_f|1.2/2.[Codepen](https://codepen.io/asabulu/pen/VwNowMP)
|137|weeixunzht|[Codepen](https://codepen.io/CalebZhang/pen/RwOmxod?editors=1001)|
|138|maru3096|[Codepen](https://codepen.io/deamru/pen/OJGKNyV)|
|139|咖|1.(2) [Codepen](https://codepen.io/daru-Ga/pen/NWmQNpb)|
|139|jimmy.0706|[Codepen](https://codepen.io/WeiJun-Mao/pen/RwOzOaB)|
|140|PoWei#8484|[Codepen](https://codepen.io/Po-Wei-Lai/pen/abxeJjV)|
|141|mike00712|1.Ans(2)/[Codepen](https://codepen.io/utpepnmr-the-looper/pen/NWmVKwY)|
|142|arielyao|1.(2)/ [Codepen](https://codepen.io/ArielYao822/pen/QWPeawP)|
|143|chichi|(2)/ [Codepen](https://codepen.io/chichihuang/pen/gOyVXGG)|
|144|discat3119|(2)/ [Codepen](https://codepen.io/dizzysoup/pen/zYXgprB)|
|145|靜靜|<font color="#f00">(2)</font>/ [Codepen](https://codepen.io/iclai/pen/BaEXYyy)
|146|Eileen|[Codepen](https://codepen.io/Eileen-io/pen/QWPeQrg)|
|147|wan_ju|1.2 /[Codepen](https://codepen.io/Laura21/pen/GRLVQBo)|
|147|Yini Chen|[Codepen](https://codepen.io/CYini/pen/wvZVmwe)|
|149|Stone|1.2 /[Codepen](https://codepen.io/stonetein/pen/xxeNpGp)|
| 150 | Aasta | **1.** 2 ／ **2.** [Codepen]
|151|Sonia|[Codepen](https://codepen.io/YUJOU/pen/VwNoJwY?editors=1111)|(https://codepen.io/Aasta-the-typescripter/pen/JjVgeZG) |
|152|chloe_mobao|(2) / [Codepen](https://codepen.io/ChloeTseng1026/pen/RwmbNYY)|
|153|martin.wu|**1.**(2) /**2.** [Codepen]、(https://codepen.io/wyipzpnh-the-decoder/pen/JjqPNjp)|
|154|Areta|**1.** 2 **2.** [Codepen](https://codepen.io/Areta-Gu/pen/yLWBjjy)|
|155|yo0x0oy|**1.** 答案=2 **2.** [Codepen](https://codepen.io/Dayton-Hsieh/pen/gOJYKrJ)|
|156|Jainee|[Codepen](https://codepen.io/Jainee0110/pen/YzbzyRW)|
|157|easonpan|[Codepen](https://codepen.io/easonpan0904/pen/vYwYGoo)|
|158|希希|[Codepen](https://codepen.io/easonpan0904/pen/dyLBpGe)|
|159|ZZ|**1.** 答案=2 **2.** [Codepen](https://codepen.io/Yong-Shao/pen/qBGBLNb)|
|160|hao jing|[Codepen](https://codepen.io/hjxu/pen/KKLKJqd?editors=1100)|
|161|flyingcatman5487|[Codepen](https://codepen.io/ysklpokt-the-looper/pen/GRagOWR)|
|162|小白|[Codepen](https://codepen.io/xjbowjbr-the-builder/pen/abrzKVw)|
|163|柯柯|[Codepen](https://codepen.io/ko13/pen/YzbXOVy)|
|164|搗蛋鬼別搗蛋|[Codepen](https://codepen.io/yaling0616/pen/xxNGNpR?editors=1100)|
|165|Carrie_Fu|[Codepen](https://codepen.io/bpefsdqq-the-decoder/pen/jOobGmd?editors=1100)|
|166|知夜|[Codepen](https://codepen.io/XiaoXiaTian2/pen/vYwLyEK)|
|167|xiang|(2)/[Codepen](https://codepen.io/Huchi-the-encoder/pen/xxNZdpw)|
|168|sunknight_002|[Codepen](https://codepen.io/aqortatm-the-solid/pen/mdYVgEZ)|

<!--【快速複製】
| num | user | [Codepen]() |
-- >