Css 简明教程

CSS - Margins

CSS 边距用于在元素外侧周围创建空间。在本教程中，我们将学习如何向 HTML 元素添加不同类型的边距以及与其关联的属性。

What is CSS Margin?

  1. CSS 中的边距通过在元素之间添加额外的空间使布局在视觉上更具吸引力。

  2. 您可以使用属性 * margin-bottom* 、 * margin-top* 、 * margin-left* 和 * margin-right* 设置各个边距。

  3. *负边距：*具有负值的边距表示元素彼此重叠。

CSS Margins Example

您可以在以下部分尝试使用不同方法来创建边距，您还可以更改这些值。

Table of Contents

Define Margin

要在任何 HTML 元素上定义任何边距，您可以使用 * CSS margin property* ，此属性是 'margin-top', 'margin-right', 'margin-bottom' 和 'margin-left' 属性的简写属性。一个值将在元素周围生成边距。

Syntax

margin: "value";

Example

如您在以下示例中看到的，我们已在 * paragraph* 元素周围创建了一个 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 Individual Sides

正如我们前面提到的，边距是所有各个边距的简写属性。您可以为顶部、右侧、底部和左侧设置不同的边距值。

  1. * margin-top:* 此属性用于设置任何元素上的顶部边距。

  2. * margin-right:* 此属性用于设置任何元素上的右侧边距。

  3. * margin-bottom:* 此属性用于设置任何元素上的底部边距。

  4. * margin-left:* 此属性用于设置任何元素上的左侧边距。

您可以查看附带图像以更清楚地了解各个侧边距。

margin diagram

Syntax

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

Example

在此示例中，我们生成了 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>

Different Ways to Apply Margin on HTML Elements

有四种方法可以向 CSS margin 属性提供值，所有这些方法都在下面使用完整的示例代码进行了提及和说明。

  1. Single Values: 此处，您可以向页边距属性提供一个值，该值将应用于元素的四个侧面。

  2. Two Values: 此处，您必须提供两个值，将用作顶部、底部、右侧和左侧的页边距值。

  3. Three Values: 这样，您可以提供三个值来定义顶部、左侧、右侧和底部值。就像您设置页边距一样：20px 40px 10px。在此情况下，顶部页边距为 20px，左右页边距为 40px，底部页边距为 10px。

  4. Four Values: 如果您向页边距属性提供四个值，它将从第一个值生成顶部页边距，从第二个值生成右侧页边距，依此类推。

Syntax

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

Example

在以下示例中，我们生成了四个不同的元素，并使用了内联 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>

Margin Mix up Units

在缩写属性中指定边距值时，CSS 不会限制使用多个单位。这意味着可以传递像素形式的长度值以及 ems 或英寸等。

Syntax

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

Example

在以下示例中，我们将提供边距属性上的 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>

Margin Percentage Values

边距属性可以传递百分比值，因为 CSS 允许这样做。百分比是相对于父元素内容区域的宽度计算的。

Example

<!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 and Inherit Value

属性值 margin: auto 用于水平居中元素。

属性值 margin: inherit 用于继承与父元素相同的边距。

Example

在这个示例中，我们将讨论 margin 的自动值和继承值。

<!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 Properties Reference

你可以浏览以下表中列出的子主题，了解有关边距属性的更多示例：