CSS 筆記 | Body 邊框多了 8px

明明沒有寫特別寫，為什麼 F12 網頁開發工具跟你說在 body 上有 margin : 8px ?

而且還怎麼樣都蓋不掉？

新手切版仔常見的問題之一。

原來是瀏覽器預設搞的鬼！

幸好套件好朋友們甚麼問題都可以解決，這次來跟 normalize.css 做朋友吧 ！

結論先來 ｜瀏覽器預設的。將 CSS reset 或 安裝相關套件就可以解決。

Photo by Tonik on Unsplash

body 多了未知的 8px

在某次重新布局 vue 的結構後，整個網頁多了一圈白框框，就像文青風照片那樣。

從 “網頁開發工具”、aka 網頁工具人、aka F12打開可以發現在 <body> 標籤多了一個 margin : 8px。”

旁邊說 “user agent stylsheet”，原來是瀏覽器預設搞的鬼，這個小淘氣！

解法

步驟一、安裝 normalize.css 套件

$ npm install --save normalize.css

安裝完應該會看到 package.json 多了一行(下圖)，這樣代表安裝成功。

步驟二、引用套件

Get Jamie Choice’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

引用：在 main.js 裡面加上

import 'normalize.css/normalize.css'

步驟三、完成

在歡呼之前，重 run 專案，會發現文青白框消失囉~

stackoverflow 討論串傳送門，卡住的世界不孤單

提醒 ｜本文為單一專案情境筆記，內容僅供參考

如果這篇文章對你有幫助，歡迎拍手讓我知道 🙂
在筆記系列，我會整理新手前端開發遇到的各種小關卡
網頁開發世界，我們不孤單

你可能有興趣的其他文章

學習筆記 | 無障礙網站開發初體驗

技術筆記 | 因了解而愛上的 command line

轉職前端工程師如何在1年調薪超過55%