CSS - margin、padding
更新於 2024/05/12閱讀時間約 1 分鐘
CSS Box Model
是在 CSS 裡面，html 的每個元素都可被視作為一個盒子，然後可以針對這個盒子去做調整，請看以下圖片:
今天如果你margin跟padding都沒設定時，你的元素會是長這樣
當你加入了margin後，我們來看看發生了甚麼變化!!!
簡單來說margin就是一個是外邊距，與外層元素的間距。
Margin 用於控制元素與其周邊元素的間隔，可以設定為正數（增加與其他元素的距離）、負數（減少與其他元素的距離）或零（不留空隙）。
padding就是一個外邊距，元素邊界至主要內容的間距。
因為內距(padding)會向外擴展，所以添加外框等裝飾會改變元素的原始總高度和寬度。
3會員
17內容數
留言0
查看全部
你可能也想看
Google News 追蹤
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
在 CSS 的開發過程中，重複使用如顏色、字體大小等值是常見的需求。為了提高程式碼維護性和靈活性，就需要用到 CSS 變量了，CSS 變量可以讓你在樣式表中儲存可重用的值。本文將介紹 CSS 變量的概念、使用方法，以及它對撰寫 CSS 的影響。
本文將介紹 CSS 中的兩個重要概念：偽類與偽元素。通過理解和運用這些概念，你可以更好的控制網頁的樣式和佈局。
背景(background)是 CSS 中最常用的功能之一，本文將介紹如何使用 CSS 來設定網頁背景，讓你的網站更加美觀。
如何透過 CSS 來美化和增強文本的可讀性，對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本，包括字型設定、文本排列、裝飾等多方面。
本文將介紹 CSS 的四個基本概念：margin（外邊距）、padding（內邊距）、border（邊框）和 box-sizing（盒模型），接下來將透過實際的程式碼範例來展示這些概念如何運作。
本篇習作加強自我對 CSS Box Model 的觀念，也是在實作練習中發現自己雖然看似理解了盒模型，但其實在應用上尚不熟悉，因此藉由筆記重新梳理和練習，將 CSS Box Model 的基礎觀念整理並釐清，一起來看看吧！
對於前端初學者來說，在切版時會出現很多規則、不規則的網頁區塊，這時候我們會嘗試用各種相對定位、絕對定位、margin 或是 padding 的方式來進行網頁區塊的推擠。
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
在 CSS 的開發過程中，重複使用如顏色、字體大小等值是常見的需求。為了提高程式碼維護性和靈活性，就需要用到 CSS 變量了，CSS 變量可以讓你在樣式表中儲存可重用的值。本文將介紹 CSS 變量的概念、使用方法，以及它對撰寫 CSS 的影響。
本文將介紹 CSS 中的兩個重要概念：偽類與偽元素。通過理解和運用這些概念，你可以更好的控制網頁的樣式和佈局。
背景(background)是 CSS 中最常用的功能之一，本文將介紹如何使用 CSS 來設定網頁背景，讓你的網站更加美觀。
如何透過 CSS 來美化和增強文本的可讀性，對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本，包括字型設定、文本排列、裝飾等多方面。
本文將介紹 CSS 的四個基本概念：margin（外邊距）、padding（內邊距）、border（邊框）和 box-sizing（盒模型），接下來將透過實際的程式碼範例來展示這些概念如何運作。
本篇習作加強自我對 CSS Box Model 的觀念，也是在實作練習中發現自己雖然看似理解了盒模型，但其實在應用上尚不熟悉，因此藉由筆記重新梳理和練習，將 CSS Box Model 的基礎觀念整理並釐清，一起來看看吧！
對於前端初學者來說，在切版時會出現很多規則、不規則的網頁區塊，這時候我們會嘗試用各種相對定位、絕對定位、margin 或是 padding 的方式來進行網頁區塊的推擠。