padding

如何在 CSS 中使用填充 (padding) padding 是 CSS 中常用的屬性，用於在元素的內側添加空間。 記住： margin 會在元素邊框外添加空間 padding 會在元素邊框內添加空間 特定 padding 屬性 (Specific padding properties) padding 有 4 個相關屬性，可以一次性修改單個邊緣的填充效果： padding-top padding-right padding-bottom padding-left 使用這些屬性非常簡單，不會混淆。例如： padding-left: 30px; padding-right: 3em; 使用 padding 簡寫 (Using the padding shorthand) padding 是一個簡寫形式，用於同時指定多個填充值，根據輸入的值的數量不同，其行為也不同。 單一值 (1 value) 使用單一值會將其應用於所有填充：上，右，下，左。 padding: 20px; 2 個值 (2 values) 使用 2 個值將第一個值應用於上和下，第二個值應用於左和右。 padding: 20px 10px; 3 個值 (3 values) 使用 3 個值將第一個值應用於上，第二個值應用於左和右，第三個值應用於下。 padding: 20px 10px 30px; 4 個值 (4 values) 使用 4 個值將第一個值應用於上，第二個值應用於右，第三個值應用於下，第四個值應用於左。...

我將介紹如何使用 box-decoration-break CSS 屬性對多行文本進行填充。 在重新設計部分博客時，我需要對每個博客標題的每行添加一些填充。以下是我的 HTML 代碼： <h1 class="post-title"> <span>{{ .Title }}</span> </h1> 然後，我添加了以下 CSS： .post-title span { padding: 0px 30px; background-color: rgb(254,207,12); } 顯然有效，它在文章標題的左右兩側添加了 30px 的填充，如下圖所示（感謝黃色背景）： 然而，當標題較長且文字換行時，我遇到了一個問題，即填充未應用到每行的結尾處： 可以看到，第二行的「A」字母前沒有填充，第一行的分號後也沒有填充。 為了解決這個問題，我使用了一個名為 box-decoration-break 的 CSS 屬性，值為 clone，並使用 Safari 的 -webkit- 属性： -webkit-box-decoration-break: clone; box-decoration-break: clone; 這樣，它在所有瀏覽器上都正常工作：