CSS - 外邊距

上一頁
下一頁

CSS 外邊距用於在元素的外部建立空間。在本教程中，我們將學習如何向 HTML 元素新增不同型別的邊距以及與此相關的屬性。

什麼是 CSS 外邊距？

  • CSS 中的外邊距透過在元素之間新增額外的空間來使佈局在視覺上更具吸引力。
  • 您可以使用屬性 margin-bottom、margin-top、margin-left 和 margin-right 設定各個邊的外邊距。
  • 負邊距：具有負值的邊距表示元素彼此重疊。

CSS 外邊距示例

您可以嘗試使用不同的方法在下面的部分中建立外邊距，並且您也可以更改值。

margin: 1em
margin: 10px 0
margin: 10px 50px 20px
margin: 10px 50px 20px 40px
margin: 30px
嘗試不同的邊距選項

目錄


 

定義外邊距

要在任何 HTML 元素上定義任何外邊距，您可以使用 CSS margin 屬性，此屬性是 'margin-top'、'margin-right'、'margin-bottom' 和 'margin-left' 屬性的簡寫屬性。單個值將圍繞元素生成外邊距。

語法

margin: "value";

示例

正如您在以下示例中看到的，我們在 段落 元素周圍建立了 10px 和 20px 的外邊距，並使用淺綠色背景突出顯示了外邊距區域。

<!DOCTYPE html>
<html>

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

<body>
    <h1>Tutorialspoint</h1>
    <h3>CSS Margin</h3>
    <div>
        <div style="margin: 20px; background: white;">
            CSS Margin 20px all sides
        </div>
        <hr color="blue">
        <div style="margin: 10px; background: white;">
            CSS Margin 10px all sides
        </div>
    </div>
</body>

</html>

各個邊的外邊距

如前所述，外邊距是所有各個邊外邊距的簡寫屬性。您可以為頂部、右側、底部和左側設定不同的外邊距值。

  • margin-top：此屬性用於設定任何元素的頂部外邊距。
  • margin-right：此屬性用於設定任何元素的右側外邊距。
  • margin-bottom：此屬性用於設定任何元素的底部外邊距。
  • margin-left：此屬性用於設定任何元素的左側外邊距。

您可以檢視附圖以更清楚地瞭解各個邊的外邊距。

CSS Margin

語法

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

示例

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

<!DOCTYPE html>
<html>

<head>
    <title>CSS Margin</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 Margin</h3>
    <div>
        <p style="margin-top: 15px;">
            <span>CSS Margin Top Applied on Paragraph Element</span>
        </p>
        <hr>
        <p style="margin-right: 15px;">
            <span>CSS Margin Right Applied on Paragraph Element</span>
        </p>
        <hr>
        <p style="margin-bottom: 15px;">
            <span>CSS Margin Bottom Applied on Paragraph Element</span>
        </p>
        <hr>
        <p style="margin-left: 15px;">
            <span>CSS Margin Left Applied on Paragraph Element</span>
        </p>
    </div>
    
</body>

</html>
元素右側的所有剩餘空間可能會讓人難以識別外邊距，如果您自己嘗試更改值，它將闡明外邊距的概念。並且始終記住，CSS 中的外邊距不允許使用負值。

在 HTML 元素上應用外邊距的不同方法

有四種方法可以為 CSS 外邊距屬性提供值，所有這些方法都已在下面提到並描述，並附有完整的示例程式碼。

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

語法

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

示例

在下面的示例中，我們建立了四個不同的元素，並使用內聯 CSS 以不同的方式圍繞元素生成外邊距。

<!DOCTYPE html>
<html>

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

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

</html>

外邊距混合單位

在指定外邊距值的簡寫屬性中，CSS 並不限制使用多個單位。這意味著可以將長度值（如畫素）與 em 或英寸等一起傳遞。

語法

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

示例

在下面的示例中，我們將為外邊距屬性提供 4 個值，但每個值都將以不同的單位表示。。

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

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

外邊距百分比值

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

示例

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

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

外邊距自動和繼承值

屬性值 margin: auto 用於水平居中元素。

屬性值 margin: inherit 用於繼承與父元素相同的邊距。

示例

在此示例中，我們將討論外邊距的自動和繼承值

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            width: 200px;
            margin: auto;
            background-color: lightgray;
        }
        p {
            margin-left: 20px;
            border: 2px solid black;
            padding: 10px
        }
        span{
            background-color: silver;
            border: 2px solid black; 
            margin-left: inherit;
        }
    </style>
</head>

<body>
    <h2>Margin Auto</h2>
    <div>
        A div element centered using margin: auto;
    </div>

    <h2>Margin Inherit</h2>
    <p>
        Some texts..<span>The span tag uses 
        same margin as parent paragraph</span>
    </p>
</body>
</html>

外邊距屬性參考

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

屬性 描述 示例
margin 一個簡寫屬性，用於在一個宣告中設定所有外邊距屬性。
margin-top 設定元素的頂部外邊距。
margin-right 設定元素的右側外邊距。
margin-bottom 設定元素的底部外邊距。
margin-left 設定元素的左側外邊距。
列印頁面

上一頁
下一頁
廣告