郭欣玫的沙龍

CSS - margin、padding

郭欣玫-avatar-img
郭欣玫
更新 發佈閱讀 1 分鐘

CSS Box Model
是在 CSS 裡面，html 的每個元素都可被視作為一個盒子，然後可以針對這個盒子去做調整，請看以下圖片:

raw-image


今天如果你margin跟padding都沒設定時，你的元素會是長這樣

raw-image



當你加入了margin後，我們來看看發生了甚麼變化!!!
簡單來說margin就是一個是外邊距，與外層元素的間距。

Margin 用於控制元素與其周邊元素的間隔，可以設定為正數（增加與其他元素的距離）、負數（減少與其他元素的距離）或零（不留空隙）。

raw-image


padding就是一個外邊距，元素邊界至主要內容的間距。

因為內距(padding)會向外擴展，所以添加外框等裝飾會改變元素的原始總高度和寬度。

raw-image


留言
avatar-img
留言分享你的想法！
avatar-img
郭欣玫的沙龍
3會員
17內容數
郭欣玫的沙龍的其他內容
2024/07/24
函式
主要來講宣告函式跟箭頭函式 : 宣告函式（Function Declaration） 語法： function functionName(parameters) { return result; } 特點： 使用 function 關鍵字 函式名稱是必需的 存在函式
2024/07/24
函式
主要來講宣告函式跟箭頭函式 : 宣告函式（Function Declaration） 語法： function functionName(parameters) { return result; } 特點： 使用 function 關鍵字 函式名稱是必需的 存在函式
2024/07/14
變數作用域
就是指變數可以被訪問和使用的範圍，來說一下var、let和const的作用域差異。 var :function example() { console.log(x); // 輸出: undefined 因為變量提升造成的 var x = 5; } 函數作用域或全域作用域 可以重複宣告
2024/07/14
變數作用域
就是指變數可以被訪問和使用的範圍，來說一下var、let和const的作用域差異。 var :function example() { console.log(x); // 輸出: undefined 因為變量提升造成的 var x = 5; } 函數作用域或全域作用域 可以重複宣告
2024/07/04
vue3 部屬GitHub Page
一開始你先把你的專案push上去後，修改vite.config.ts ，要在裡面新增  base: "/Cart/" (/放自己的專案名稱/) build: {outDir: "docs"}, 接下來你要去你的github setting 裡面 -> Page ->選Deploy fro
Thumbnail
2024/07/04
vue3 部屬GitHub Page
一開始你先把你的專案push上去後，修改vite.config.ts ，要在裡面新增  base: "/Cart/" (/放自己的專案名稱/) build: {outDir: "docs"}, 接下來你要去你的github setting 裡面 -> Page ->選Deploy fro
Thumbnail
看更多
你可能也想看
Thumbnail
avatar-avatar
阿揪西茶房
回饋達人也會累：玉山Unicard一張卡簡化你的理財生活
厭倦了管理眾多信用卡以追求最高回饋？玉山Unicard權益切換信用卡應運而生，讓您輕鬆切換消費方案，從1%無上限基本回饋，透過三種方案任意切換，最高可享4.5%回饋，更有限時核卡加碼至7.5%。本文深入解析各方案優勢、設定方式，並提供日常與旅行配置建議，讓您成為聰明消費的「回饋金獵人」。
#玉山銀行#玉山Unicard#信用卡
Thumbnail
avatar-avatar
阿揪西茶房
回饋達人也會累：玉山Unicard一張卡簡化你的理財生活
厭倦了管理眾多信用卡以追求最高回饋？玉山Unicard權益切換信用卡應運而生，讓您輕鬆切換消費方案，從1%無上限基本回饋，透過三種方案任意切換，最高可享4.5%回饋，更有限時核卡加碼至7.5%。本文深入解析各方案優勢、設定方式，並提供日常與旅行配置建議，讓您成為聰明消費的「回饋金獵人」。
#玉山銀行#玉山Unicard#信用卡
Thumbnail
avatar-avatar
Miller的投資沙龍
我的美股ETF篩選筆記
話說身為短線交易者，每天要作的事情就是從盤勢觀察、到籌碼流向，再到經過多維度資料數據交叉比對，盤中盯著分K、江波圖和五檔報價，算計著每一分K線的轉折，雖能換來即時驗證判斷的快感與成就，但長期下來，卻也衍生眼睛與肩頸卻成了抹不去的職業病。
#當沖#短線#波段
Thumbnail
avatar-avatar
Miller的投資沙龍
我的美股ETF篩選筆記
話說身為短線交易者，每天要作的事情就是從盤勢觀察、到籌碼流向，再到經過多維度資料數據交叉比對，盤中盯著分K、江波圖和五檔報價，算計著每一分K線的轉折，雖能換來即時驗證判斷的快感與成就，但長期下來，卻也衍生眼睛與肩頸卻成了抹不去的職業病。
#當沖#短線#波段
Thumbnail
avatar-avatar
MIA的宇宙
年底前來一張玉山Unicard，讓生活中每筆消費都有回饋！
快要年末了，對於即將要出國的我，即時來了這張信用卡真的很不錯。認識我的人都知道我因為工作常常要出國，所以這次感謝玉山銀行合作邀請，讓我可以體驗這張卡的美好。
#玉山銀行#玉山Unicard#信用卡
Thumbnail
avatar-avatar
MIA的宇宙
年底前來一張玉山Unicard，讓生活中每筆消費都有回饋！
快要年末了，對於即將要出國的我，即時來了這張信用卡真的很不錯。認識我的人都知道我因為工作常常要出國，所以這次感謝玉山銀行合作邀請，讓我可以體驗這張卡的美好。
#玉山銀行#玉山Unicard#信用卡
Thumbnail
avatar-avatar
Michael楊
CSS入門-Day8：佈局（三）
在本章中，我們探討了CSS Grid佈局的基本概念和應用。CSS Grid提供了一個強大而靈活的二維佈局系統，使得處理複雜的網頁佈局變得更加簡單和直觀。我們學習了如何設置Grid容器和Grid項目，以及如何使用各種Grid屬性來定義和管理佈局。
#CSS
Thumbnail
avatar-avatar
Michael楊
CSS入門-Day8：佈局（三）
在本章中，我們探討了CSS Grid佈局的基本概念和應用。CSS Grid提供了一個強大而靈活的二維佈局系統，使得處理複雜的網頁佈局變得更加簡單和直觀。我們學習了如何設置Grid容器和Grid項目，以及如何使用各種Grid屬性來定義和管理佈局。
#CSS
Thumbnail
avatar-avatar
Michael楊
CSS入門-Day7：佈局（二）
在這一章節中，我們介紹了 Flexbox 這個 CSS 模型及其用法，重點講解了 Flex 容器和項目的各種屬性。通過具體的示例，展示了如何使用 Flexbox 進行一維佈局設計，並且通過實踐案例，展示了多行 Flex 項目和不同對齊方式的應用。
#CSS
Thumbnail
avatar-avatar
Michael楊
CSS入門-Day7：佈局（二）
在這一章節中，我們介紹了 Flexbox 這個 CSS 模型及其用法，重點講解了 Flex 容器和項目的各種屬性。通過具體的示例，展示了如何使用 Flexbox 進行一維佈局設計，並且通過實踐案例，展示了多行 Flex 項目和不同對齊方式的應用。
#CSS
Thumbnail
avatar-avatar
Michael楊
CSS入門-Day5：盒模型
CSS 盒模型是理解和設計網頁佈局的核心概念。它包括元素的內容、填充、邊框和外邊距。
#CSS
Thumbnail
avatar-avatar
Michael楊
CSS入門-Day5：盒模型
CSS 盒模型是理解和設計網頁佈局的核心概念。它包括元素的內容、填充、邊框和外邊距。
#CSS
Thumbnail
avatar-avatar
Michael楊
CSS入門-Day3：文字與字體樣式
CSS入門-Day3 的主要內容包括字體大小、字體顏色、字體系列、字體樣式、字體粗細等屬性。此外，還涵蓋了文本對齊、行高、文字間距、單詞間距和文本裝飾。最後，介紹了如何引入和使用 Google 字體，以提高網頁的排版效果。
#CSS
Thumbnail
avatar-avatar
Michael楊
CSS入門-Day3：文字與字體樣式
CSS入門-Day3 的主要內容包括字體大小、字體顏色、字體系列、字體樣式、字體粗細等屬性。此外，還涵蓋了文本對齊、行高、文字間距、單詞間距和文本裝飾。最後，介紹了如何引入和使用 Google 字體，以提高網頁的排版效果。
#CSS
Thumbnail
avatar-avatar
Michael楊
CSS入門-Day2：語法
這節課的學習目標是了解 CSS 的基本語法結構和使用方法。
#CSS
Thumbnail
avatar-avatar
Michael楊
CSS入門-Day2：語法
這節課的學習目標是了解 CSS 的基本語法結構和使用方法。
#CSS
Thumbnail
avatar-avatar
Michael楊
CSS入門-Day1：語言介紹、觸及的領域、誰在使用
CSS 是控制網頁外觀的語言，應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
#CSS
Thumbnail
avatar-avatar
Michael楊
CSS入門-Day1：語言介紹、觸及的領域、誰在使用
CSS 是控制網頁外觀的語言，應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
#CSS
Thumbnail
avatar-avatar
驅動數位行銷
Padding 與 Margin 的區別是什麼？先從 Box Model 開始說起
在學習 CSS 的過程中，Padding 與 Margin 是兩個經常出現的名詞，但對於初學者來說，可能會有些難以理解。因此，本篇文章將解釋這兩個非常重要的 CSS 屬性。當你掌握後，便能設計出更具層次或易讀的網頁。
#CSS
Thumbnail
avatar-avatar
驅動數位行銷
Padding 與 Margin 的區別是什麼？先從 Box Model 開始說起
在學習 CSS 的過程中，Padding 與 Margin 是兩個經常出現的名詞，但對於初學者來說，可能會有些難以理解。因此，本篇文章將解釋這兩個非常重要的 CSS 屬性。當你掌握後，便能設計出更具層次或易讀的網頁。
#CSS
Thumbnail
avatar-avatar
學習如何學習
CSS 習作｜響應式網站・width、max-width、min-width 是什麼？
CSS 裡的「寬度，最大寬度，最小寬度」分別是什麼呢？ ➊ width 用來設定元素的寬度，且 width 作用範圍僅在 content-box 區塊 ➋ max-width → 用來設定元素的最大寬度 ➌ min-width → 用來設定元素的最小寬度
#HTML#CSS#網頁設計
Thumbnail
avatar-avatar
學習如何學習
CSS 習作｜響應式網站・width、max-width、min-width 是什麼？
CSS 裡的「寬度，最大寬度，最小寬度」分別是什麼呢？ ➊ width 用來設定元素的寬度，且 width 作用範圍僅在 content-box 區塊 ➋ max-width → 用來設定元素的最大寬度 ➌ min-width → 用來設定元素的最小寬度
#HTML#CSS#網頁設計
Thumbnail
avatar-avatar
大漠聊 CSS
图解CSS：揭开CSS的面纱
您對前端有興趣，對CSS不陌生。CSS新特性前應瞭解基本內容。CSS屬性制定經歷過程，瀏覽器私有前綴及處理，開發者對新特性漸進增強，優雅降級處理，Web標準定義、作用等。
#CSS#前端#CSS應用
Thumbnail
avatar-avatar
大漠聊 CSS
图解CSS：揭开CSS的面纱
您對前端有興趣，對CSS不陌生。CSS新特性前應瞭解基本內容。CSS屬性制定經歷過程，瀏覽器私有前綴及處理，開發者對新特性漸進增強，優雅降級處理，Web標準定義、作用等。
#CSS#前端#CSS應用
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News