css 常見間距設定原則
更新日期： 2024 年 10 月 29 日
在網站設計中，CSS 間距設定是讓頁面保持美觀、易讀和組織性的重要部分。
對新手來說，CSS 的間距設定可能有點複雜，但只要掌握幾個常見的原則，就可以讓你的頁面更加專業。
今天，我們將介紹 CSS 中常見的間距設定，包括 外邊距（margin）、內邊距（padding）、行高（line-height）、字距（letter-spacing） 以及 段落間距 等原則。
外邊距（Margin）
外邊距是指元素與其他元素之間的距離。
簡單來說，它就是元素「外面」的空間。外邊距的設定讓元素彼此之間保持間距，避免擠在一起。
用法
.element {
margin: 20px;
}這段代碼將 element 元素四周的外邊距都設為 20px。
如果想對四邊分別設置不同的外邊距，可以這樣寫：
.element {
margin-top: 10px; /* 上 */
margin-right: 15px; /* 右 */
margin-bottom: 10px; /* 下 */
margin-left: 15px; /* 左 */
}常見使用原則
- 統一性：保持所有元素的外邊距一致，讓頁面看起來整齊。
- 調整間距：在標題、段落和圖片等之間設置適當的外邊距，讓排版清晰分明。
- 自適應排版：可使用
margin: auto;來讓元素在容器中水平置中（例如，設計頁面主體區域的置中）。
內邊距（Padding）
內邊距是指元素內部內容和邊框之間的距離。
內邊距可以讓文字或圖像與邊框保持距離，看起來更為舒適。
用法
.element {
padding: 10px;
}這樣設定將元素的四邊內邊距都設為 10px。
如果需要對四邊分別設置內邊距，可以這樣寫：
.element {
padding-top: 10px; /* 上 */
padding-right: 15px; /* 右 */
padding-bottom: 10px; /* 下 */
padding-left: 15px; /* 左 */
}常見使用原則
- 容器內的空間：給元素內部適當的內邊距，讓內容不會貼到邊界，提升可讀性。
- 按需調整：例如按鈕或表單元素通常需要較大的內邊距，讓點擊區域更大，增強用戶體驗。
- 保持一致：確保頁面中相同類型的元素使用相似的內邊距，讓整體視覺和諧。
行高（Line-Height）
行高決定了文本行與行之間的距離，通常應該稍大於字體大小，以保證文本的可讀性。
良好的行高讓段落中的文字不會顯得過於擁擠。
用法
.element {
line-height: 1.5;
}這樣設定的行高是字體大小的 1.5 倍。
這種方式在不同字體大小的元素中表現一致，不會因字體大小不同而出現間距不協調的情況。
常見使用原則
- 易讀性：推薦行高設為字體大小的 1.5 到 2 倍，能夠增強段落的易讀性。
- 保持一致：確保頁面中的主要文本行高一致，特別是在段落文字中。
- 視覺層次：標題文字可以適當縮小行高，讓標題更加緊密和顯眼。
字距（Letter-Spacing）
概念
字距是指文字間的水平間距。
字距設定能讓文字更具設計感，例如標題或品牌名稱，讓它們看起來更具個性和視覺吸引力。
用法
.element {
letter-spacing: 1px;
}這樣設定的字距讓每個字母之間保持 1px 的距離。
常見使用原則
- 標題字體：對於大字體的標題，適當增加字距能增強視覺效果。
- 縮小字距：對小字體而言，通常不建議增加字距，這樣會影響可讀性。
- 一致性：同類型的文字（例如同一段落中的文字）應保持一致的字距。
段落間距（Paragraph Spacing）
概念
段落間距是指段落與段落之間的距離，通常用於調整多段文字之間的空白，避免段落間距過小而影響閱讀流暢性。
用法
段落間距通常可以通過增加 margin-bottom 來實現：
p {
margin-bottom: 20px;
}這樣設定會讓每個段落的下方留有 20px 的空間。
常見使用原則
- 合理的間隔：適當的段落間距能讓讀者在閱讀時有自然的停頓和緩衝。
- 保持一致：在同一頁面中統一段落間距，讓文本排版整齊有序。
- 依視覺設計調整：段落間距可以根據設計需求調整，讓版面看起來更加整潔和易讀。
空白（Whitespace）的使用
在 CSS 間距設定中，適當利用「空白」是一個進階但非常重要的概念。
空白指的是畫面上沒有內容的區域，用來分隔元素、強調重點或增加視覺效果。
適當的空白能夠提升網站的設計質感，讓使用者有更好的瀏覽體驗。
常見使用原則
- 減少視覺疲勞：讓每個元素都有適當的呼吸空間，避免頁面看起來過於擁擠。
- 分割內容區塊：空白可以幫助不同區塊之間建立視覺層次，例如標題和正文之間留出空白區域。
- 保持整潔簡約：在頁面設計中，適當利用空白可以讓頁面看起來更簡潔而不雜亂。
總結
CSS 間距設定雖然看似簡單，卻是設計中不可或缺的一部分。
透過對外邊距、內邊距、行高、字距以及段落間距的理解和應用，你可以創造出更加整齊、有層次的頁面。
間距設定不僅僅是美化頁面，更是提升網站易讀性和使用者體驗的重要手段。
新手可以先從簡單的間距設定開始，隨著經驗增長，逐步嘗試更多設計技巧。