CSS Margin 0 Auto

2025年1月22日 | 阅读时长 5 分钟

本文将讨论 CSS margin。

CSS Margin

CSS margin 是 CSS 属性，用于在元素的边框外部创建空间。"margin" 属性可以有一个值、两个值、三个值或四个值。

当 margin 有一个值时

它在所有侧面设置相等的 margin。

语法

margin: length;</p>
<h3 class="h3">When the margin has two values:</h3>
<p>Its first value sets the equal top and bottom margins.</p>
<p>Its second value sets the equal right and left margins.</p>
<p><strong>Syntax:</strong></p>
<div class="codeblock"><textarea name="code" class="xml">
Margin: top-bottom right-left;

当 margin 有三个值时

它的第一个值设置顶部 margin。

它的第二个值设置相等的左右 margin。

它的第三个值设置底部 margin。

语法

当 margin 有四个值时

它是可以用于设置所有侧面不同 margin 的简写属性。

语法

在 CSS 中，有单独的 margin 属性。我们可以为单个侧面单独设置 margin，即顶部、底部、左侧和右侧。

Margin-top

用于设置顶部的 margin。

语法

Margin-right

用于设置右侧的 margin。

语法

Margin-bottom

用于设置底部的 margin。

语法

Margin-left

用于设置左侧的 margin。

语法

margin-left: length;

Auto Margin (自动 margin)

用于将元素水平居中。

语法

CSS Margin 的示例

让我们通过示例来理解 CSS margin。

插图 1

我们将使用 CSS margin 属性，并为其设置一个值、两个值、三个值或四个值。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Setting margin using one value, two values, three values, and four values</title>
    <style>
        .div1 {
            border: 1px solid darkgreen;
            margin: 12px;
        }
        .div2 {
            border: 1px solid firebrick;
            margin: 12px 20px;
        }
        .div3 {
            border: 1px solid saddlebrown;
            margin: 25px 20px 5px;
        }
        .div4 {
            border: 1px solid orangered;
            margin: 17px 25px 35px 40px;
        }
    </style>
</head>
<body>
    <h2>When given one value:</h2>
    <h3>margin: 12px</h3>
    <div class="div1">We are giving one value to the margin property to set equal margins from all sides.</div>
    <h2>When given two values:</h2>
    <h3>margin: 12px 20px</h3>
    <div class="div2">We are giving two values to the margin property to set the equal top & bottom margins and equal right & left margins.</div>
    <h2>When given three values:</h2>
    <h3>margin: 25px 20px 5px</h3>
    <div class="div3">We are giving three values to the margin property to set the top margin, equal right & left margins, and bottom margin.</div>
    <h2>When given four values:</h2>
    <h3>margin: 17px 25px 35px 40px</h3>
    <div class="div4">We are giving four values to the margin property to set different margins on all sides.</div>
</body>
</html>

输出

这是输出，我们可以看到 CSS margin 属性的使用。

插图 2

我们将通过应用单个 CSS margin 属性来固定不同侧面的 margin。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixing the margin of distinct sides with the usage of individual margin properties</title>
    <style>
        .div1 {
            border: 1px solid darkgreen;
            margin-top: 24px;
        }
        .div2 {
            border: 1px solid firebrick;
            margin-right: 32px;
        }
        .div3 {
            border: 1px solid saddlebrown;
            margin-bottom: 42px;
        }
        .div4 {
            border: 1px solid orangered;
            margin-left: 50px;
        }
    </style>
</head>
<body>
    <h3>margin-top: 24px</h3>
    <div class="div1">We have set the top margin of this element by utilizing the margin-top property.</div>
    <h3>margin-right: 32px</h3>
    <div class="div2">We have adjusted the space on the right side of this element by utilizing the margin-right property.</div>
    <h3>margin-bottom: 42px</h3>
    <div class="div3">We have adjusted the space at the bottom of this element utilizing the margin-bottom property.</div>
    <h3>margin-left: 50px</h3>
    <div class="div4">We have applied the margin-left property and defined the top margin of this element.</div>
</body>
</html>

输出

通过下面的输出，我们可以看到使用单个 CSS margin 属性在不同元素的各个侧面产生的间隙。

插图 3

在此演示中，我们将学习如何通过将 CSS margin 属性值设置为"auto" 来使用它。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Assigning the margin to auto by utilizing the CSS margin property</title>
    <style>
        body {
            background-color: lavenderblush;
        }
        div {
            border: 1px solid purple;
            width: 450px;
            margin: auto;
        }
    </style>
</head>
<body>
    <h3>margin: auto</h3>
    <div>We have put the margin of this element to auto by utilizing the margin property.</div>
</body>
</html>

输出

我们可以在下方的输出中看到 CSS margin 设置为 "auto" 的用法。

margin: 0 auto

它在顶部和底部保持 0 margin，在左侧和右侧保持自动 margin。

当 Margin 值设置为 0 和 auto 时的 CSS Margin 示例

我们将理解当 margin 值为0 和 auto 时会发生什么。

插图 1

当 margin 值被赋为 0 和 auto 时，我们将理解 CSS margin 属性。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixing the margin to 0 and auto by utilizing margin property</title>
    <style>
        body {
            background-color: rgb(244, 198, 176);
        }
        div {
            border: 1px solid purple;
            width: 250px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <h3>margin: 0 auto</h3>
    <div>We have kept the margin to 0 from top & bottom and auto at the right & left by utilizing the margin property.</div>
</body>
</html>

输出

这是输出，在其中我们可以看到 <div> 元素通过 CSS margin 属性水平居中。

插图 2

我们将设置表格的 margin 为 0 和 auto。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Setting the margin of the table to 0 and auto by using margin property</title>
    <style>
        body {
            background-color: beige;
        }
       table, th, tr, td {
            border: 2px solid green;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div>
        <table>
            <caption>Electronic Gadgets Table</caption>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Quantity</th>
                <th>Price</th>
            </tr>
            <tr>
                <td>1001</td>
                <td>Power Bank</td>
                <td>10</td>
                <td>10,000</td>
            </tr>
            <tr>
                <td>1002</td>
                <td>Laptop Charger</td>
                <td>5</td>
                <td>15,000</td>
            </tr>
            <tr>
                <td>1003</td>
                <td>Wireless Earbuds</td>
                <td>20</td>
                <td>25,000</td>
            </tr>
            <tr>
                <td>1004</td>
                <td>Portable Bluetooth Speaker</td>
                <td>9</td>
                <td>18,000</td>
            </tr>
        </table>
    </div>
</body>
</html>

输出

这是输出，在其中我们可以看到表格通过 CSS margin 属性水平居中。

插图 3

我们将设置列表的 margin 为 0 和 auto。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Setting margin of the list to 0 and auto using margin property</title>
    <style>
        body {
            background-color: brown;
        }
        h3 {
            text-align: center;
            color: yellow;
        }
        ol {
            border: 1px solid yellow;
            width: 350px;
            color: yellow;
            margin: 0 auto;
        } 
    </style>
</head>
<body>
    <h3>List of dinner items</h3>
    <ol>
        <li>Dal Makhani</li>
        <li>Matar Paneer</li>
        <li>Chilli Paneer</li>
        <li>Chickpea Curry</li>
        <li>Fried Rice</li>
        <li>Pasta</li>
        <li>Pizza</li>
        <li>Dinner Salad</li>
        <li>Burger</li>
        <li>Palak Corn Sabzi</li>
    </ol>
</body>
</html>

输出

这是输出，在其中我们可以看到列表通过 CSS margin 属性水平居中。

浏览器支持

以下是支持CSS margin 属性的浏览器：

Microsoft Edge
Opera
Safari
谷歌浏览器
火狐

结论

在本文中，我们已经理解了CSS margin 0 auto。0 和 auto 是 CSS margin 属性的值，用于将 HTML 元素水平居中。我们已经通过示例理解了 CSS margin 属性。

下一主题Css-table-with-fixed-header

CSS Margin 0 Auto

CSS Margin

当 margin 有一个值时

当 margin 有三个值时

当 margin 有四个值时

Margin-top

Margin-right

Margin-bottom

Margin-left

Auto Margin (自动 margin)

CSS Margin 的示例

插图 1

插图 2

插图 3

margin: 0 auto

当 Margin 值设置为 0 和 auto 时的 CSS Margin 示例

插图 2

插图 3

浏览器支持

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS Margin 0 Auto

CSS Margin

当 margin 有一个值时

当 margin 有三个值时

当 margin 有四个值时

Margin-top

Margin-right

Margin-bottom

Margin-left

Auto Margin (自动 margin)

CSS Margin 的示例

插图 1

插图 2

插图 3

margin: 0 auto

当 Margin 值设置为 0 和 auto 时的 CSS Margin 示例

插图 2

插图 3

浏览器支持

结论

相关帖子

CSS Flip Image

CSS Scrollbar inside Div

CSS Media Types

CSS Viewer

如何删除 CSS 中的滚动条

CSS Background Image Full Screen

Background Shorthand CSS

CSS Content SVG

CSS Stripes

CSS Border Opacity

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器