把滑鼠移到下方的彩色盒子上，看看每一層的作用。
把滑鼠移到上面的彩色盒子上試試看...
為什麼聊天訊息要這樣包
外層 chat-container 管整個聊天室的版面；中層 message 把文字綁在一起，才不會跑版；最內層 p 只負責文字段落。分層之後，AI 和你都更容易理解結構、修改樣式。
常見錯誤（標籤交叉）
先打開的盒子要最後關上。想像俄羅斯套娃：小的先蓋蓋子，大的才能蓋上。
訊息文字跑到泡泡外面了！拖曳左邊的程式碼行，把順序排對。
Alice
切換看看，有沒有 div 包裹，畫面差多少。
Alice
嗨！
Bob
你好呀～
全部擠在一起，分不清誰說的...
Vibe Coder 的關鍵直覺
div 本身不會顯示任何東西，它是隱形的收納盒。但當你用它把相關內容包在一起後，就可以對整組內容統一加背景色、邊框、間距。跟 AI 溝通時說「把 Alice 的訊息包在一個 div 裡」，AI 就知道你要分組。