如何去除UL的預設邊距?

對於新手或者剛畢業甚至參加工作一段時間的網頁製作人員都會受到邊距的影響，你好久搞不定的問題有可能就是邊距搞的鬼，有不少同學與同事都問過我邊距的問題，其中UL 的邊距問題最多，這裡我簡單說一下。

工具/原料

Dreamweaver網頁編輯軟體

瀏覽器

方法/步驟

首先開啟Dreamweaver，Dreamweaver是我們最早接觸的網頁編輯軟體，很適合新手。

開啟Dreamweaver後，新建一個檔案，用來編輯演示的滿面。

頁面程式碼如下圖所示，很簡單的，新手都能一看即懂，在程式碼中我去掉了LI預設的list-style 圓點，這樣就排除原點間距與預設邊距疊加造成的混淆效果了。

然後我們儲存好網頁，用瀏覽器開啟我們的網頁，我們會發現我們的網頁4個li並麼有像我們想象的一字排列，而是形成了兩列。div寬是320px,Li（算上兩邊的邊框）寬是80畫素，正好可以一字排開。

這是因為我們沒有去除預設邊距的原因，下面這張圖我們加上了【margin:0;padding:0;】，然後我們檢視一下效果。

加上【margin:0;padding0;】的效果如下圖所示，我們發現它們一字排開，達到了預期的效果。

上面我們說到的ul的邊距，其中頁面也有邊距問題，這是新手絕對會遇到與困惑的事情，我承認我曾經也困惑過，圖中黑色箭頭指的就是頁面的邊距。

頁面的邊距問題解決方法與UL一樣，只要加上【body{ margin:0;padding:0;}】即可。

效果如下圖所示，頁面的邊距消失啦。

注意事項

一定要注意【body{ margin:0;padding:0;}】前不用加點。

共同分享，共同進步。