CSS - margin、padding
閱讀時間約 1 分鐘
CSS Box Model
是在 CSS 裡面，html 的每個元素都可被視作為一個盒子，然後可以針對這個盒子去做調整，請看以下圖片:
今天如果你margin跟padding都沒設定時，你的元素會是長這樣
當你加入了margin後，我們來看看發生了甚麼變化!!!
簡單來說margin就是一個是外邊距，與外層元素的間距。
Margin 用於控制元素與其周邊元素的間隔，可以設定為正數（增加與其他元素的距離）、負數（減少與其他元素的距離）或零（不留空隙）。
padding就是一個外邊距，元素邊界至主要內容的間距。
因為內距(padding)會向外擴展，所以添加外框等裝飾會改變元素的原始總高度和寬度。
2會員
13內容數
留言0
查看全部
郭欣玫的沙龍 的其他內容
你可能也想看
創作者要怎麼好好休息 + 避免工作過量？《黑貓創作報#4》午安，最近累不累？
這篇不是虛假的關心。而是《黑貓創作報》發行以來可能最重要的一篇。
是的，我們這篇講怎麼補充能量，也就是怎麼休息。
2024-06-29
CSS 程式札記 : 變量(Variables)在 CSS 的開發過程中，重複使用如顏色、字體大小等值是常見的需求。為了提高程式碼維護性和靈活性，就需要用到 CSS 變量了，CSS 變量可以讓你在樣式表中儲存可重用的值。本文將介紹 CSS 變量的概念、使用方法，以及它對撰寫 CSS 的影響。
2024-02-18
CSS 程式札記 : 背景 background背景(background)是 CSS 中最常用的功能之一，本文將介紹如何使用 CSS 來設定網頁背景，讓你的網站更加美觀。
2024-01-25
CSS 程式札記 : 字型與文本如何透過 CSS 來美化和增強文本的可讀性，對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本，包括字型設定、文本排列、裝飾等多方面。
2024-01-22
CSS 程式札記 : margin、padding、border、box-sizing本文將介紹 CSS 的四個基本概念：margin（外邊距）、padding（內邊距）、border（邊框）和 box-sizing（盒模型），接下來將透過實際的程式碼範例來展示這些概念如何運作。
2023-08-03
CSS 習作｜認識 Box Model 運作原理，padding 和 margin 的使用時機是什麼？本篇習作加強自我對 CSS Box Model 的觀念，也是在實作練習中發現自己雖然看似理解了盒模型，但其實在應用上尚不熟悉，因此藉由筆記重新梳理和練習，將 CSS Box Model 的基礎觀念整理並釐清，一起來看看吧！
2023-06-15
【CSS 教學】什麼時候該使用 margin 、padding？前端都該要懂的盒模型！ 對於前端初學者來說，在切版時會出現很多規則、不規則的網頁區塊，這時候我們會嘗試用各種相對定位、絕對定位、margin 或是 padding 的方式來進行網頁區塊的推擠。
2021-09-28