CSS - 內邊距

CSS padding 用於在元素的邊框與其內容之間建立額外的空間。在本文中，我們將學習不同型別的填充及其相關屬性。

什麼是 CSS 內邊距？

在 CSS 中，padding 是一種屬性，用於在元素邊界內建立額外的間距。 padding 的預設值為零。 padding 值為零表示內容（主要是文字內容）將從元素本身的邊框開始。

CSS 內邊距示例

您可以嘗試不同的方法在以下部分建立填充，並且您也可以更改值。

padding: 1em

padding: 10px 0

padding: 10px 50px 20px

padding: 10px 50px 20px 40px

padding: 30px

嘗試不同的填充選項

定義內邊距

要為任何 HTML 元素定義任何填充，您可以使用CSS padding 屬性，此屬性是'padding-top'、'padding-right'、'padding-bottom' 和 'padding-left' 屬性的簡寫屬性。單個值將圍繞元素生成填充。

語法

padding: "value";

示例

如您在以下示例中看到的，我們已生成圍繞段落元素的 5px 填充，並以淺綠色背景突出顯示填充區域。

<!DOCTYPE html>
<html>

<head>
    <title>CSS Padding</title>
    <style>
        div{
            background-color: lightgray;
            border: 1px solid black;
        }
        
        p {
            background-color: white;
        }
    </style>
</head>

<body>
    <h1>Tutorialspoint</h1>
    <h3>CSS Padding</h3>
    <div>
        <p style="padding: 5px;">
            CSS Padding Applied on Paragraph Element
        </p>
    </div>
</body>

</html>

填充各個邊

正如我們之前提到的，padding 是所有各個邊填充的簡寫屬性。您可以為頂部、右側、底部和左側設定不同的填充值。

padding-top: 此屬性用於設定任何元素的頂部填充。
padding-right: 此屬性用於設定任何元素的右側填充。
padding-bottom: 此屬性用於設定任何元素的底部填充。
padding-left: 此屬性用於設定任何元素的左側填充。

您可以檢視附加的圖片以更清楚地瞭解各個邊的填充。

語法

padding-top: "value";
padding-right: "value";
padding-bottom: "value";
padding-left: "value";

示例

在此示例中，我們建立了 4 個不同的元素，並使用上述屬性在每個元素的各個邊上生成了填充。

<!DOCTYPE html>
<html>

<head>
    <title>CSS Padding</title>
    <style>
        div{
            background-color: lightgray;
            border: 1px solid black;
        }
        
        p {
            background-color: lightgreen;
            border: 1px solid black;
            
        }
        span {
            background-color: white;
        }
    </style>
</head>

<body>
    <h1>Tutoriaslpoint</h1>
    <h3>CSS Padding</h3>
    <div>
        <p style="padding-top: 15px;">
            <span>CSS Padding Top Applied on Paragraph Element</span>
        </p>
        <p style="padding-right: 15px;">
            <span>CSS Padding Right Applied on Paragraph Element</span>
        </p>
        <p style="padding-bottom: 15px;">
            <span>CSS Padding Bottom Applied on Paragraph Element</span>
        </p>
        <p style="padding-left: 15px;">
            <span>CSS Padding Left Applied on Paragraph Element</span>
        </p>
    </div>
    
</body>

</html>

元素右側的所有剩餘空間可能難以識別填充，如果您自己嘗試更改值，它將闡明填充概念。並始終記住，CSS 中不允許使用負值進行填充。

在 HTML 元素上應用填充的不同方法

有四種方法可以為 CSS padding 屬性提供值，所有這些方法都在下面使用完整的示例程式碼進行了說明和描述。

單個值： 在這裡，您可以為 padding 屬性提供一個值，該值將適用於元素的四面。
兩個值： 在這裡，您必須提供兩個值，它們將用作頂部、底部和右側、左側填充值。
三個值： 透過這種方式，您可以提供三個值來定義頂部、左側、右側和底部值。例如，如果您設定 padding: 20px 40px 10px。在這種情況下，頂部填充將為 20px，右側和左側填充將為 40px，底部填充將為 10px。
四個值： 如果您為 padding 屬性提供四個值，它將從第一個值生成頂部填充，從第二個值生成右側填充，依此類推。

語法

padding: "value" // Single Value
padding: "value value" // Two Values
padding: "value value value" // Three Values
padding: "value value value value" // Four Values

示例

在以下示例中，我們建立了四個不同的元素，並使用內聯 css 以不同的方式在元素周圍生成填充。

<!DOCTYPE html>
<html>

<head>
    <title>CSS Padding</title>
    <style>
        div{
            background-color: lightgray;
            border: 1px solid black;
        }
        
        p {
            background-color: lightgreen;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <h1>Tutoriaslpoint</h1>
    <h3>CSS Padding</h3>
    <div>
        <p style="padding: 20px">
            <span>Padding property with Single Value</span>
        </p>
        <p style="padding: 10px 20px">
            <span>Padding property with two Values</span>
        </p>
        <p style="padding: 10px 15px 20px">
            <span>Padding property with three Values</span>
        </p>
        <p style="padding: 5px 10px 15px 20px">
            <span>Padding property with four Values</span>
        </p>
    </div>
    
</body>

</html>

填充混合單位

CSS 並不限制在指定填充值的簡寫屬性時使用多個單位。這意味著可以將長度值作為畫素與 em 或英寸等一起傳遞。

語法

h2 {
    padding: 20px 4ex .5in 3em; 
}

示例

在以下示例中，我們將為 padding 屬性提供 4 個值，但每個值都將以不同的單位提及。

<!DOCTYPE html>
<html>
<head>
    <style>
        h2 {
            padding: 20px 4ex .5in 3em; 
            background-color: silver;
        }
    </style>
</head>

<body>
    <div>
        <h2>
            The different length units are passed 
            as padding values to the h2 element.
        </h2>
    </div>
</body>
</html>

填充百分比值

padding 屬性可以傳遞百分比值，因為 CSS 允許它。百分比是相對於父元素內容區域的寬度計算的。

語法

p {
    padding: 10%; 
}

示例

在此示例中，我們將為 padding 屬性提供百分比值，此百分比取決於父元素內容區域的寬度。

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 300px;
        }
        p {
            padding: 10%; 
            background-color: silver;
        }
    </style>
</head>

<body>
    <div>
        <p>
            The padding defined for p element is  
            10%, which is calculated as 10% of 
            width of parent element,  which means
            it is 10% of 300px and that is 30px.
        </p>
    </div>
</body>
</html>

填充屬性參考

您可以透過訪問以下表格中列出的子主題來探索有關填充屬性的更多示例

屬性	描述	示例
padding	一個簡寫屬性，用於在一個宣告中設定所有填充屬性。	試試看
padding-top	設定元素的頂部填充。	試試看
padding-right	設定元素的右側填充。	試試看
padding-bottom	設定元素的底部填充。	試試看
padding-left	設定元素的左側填充。	試試看

列印頁面