CSS Spacing

2025年1月31日 | 阅读 8 分钟

在本文中，我们将讨论CSS 间距。间距在 CSS 中很重要，因为间距的大小决定了元素之间的关系。

CSS 中有许多方法可以创建间距。

填充 (Padding)

Padding 是 CSS 属性，用于在 HTML 元素内部添加空间。它在元素周围添加空间，意味着可以为元素的左、右、上和下侧添加空间。padding 属性接受四个值。

padding 简写属性的语法

上面语法中提到的"padding"是 padding 的简写属性，它接受所有四个值。

单独 padding 属性的语法

padding-top: length;
padding-right: length;
padding-bottom: length;
padding-left: length;

上面语法中的长度单位可以是 cm、px 等。

演示 1

在本演示中，我们将使用 padding 的简写属性。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Padding shorthand property</title>
    <style>
        p {
            padding: 30px 35px 45px 50px;
            border: 1px dashed red;
            background-color: rgb(247, 191, 191);
        }
    </style>
</head>
<body>
    <h2>Padding Shorthand Property</h2>
    <p>This is the paragraph element which has <br> 30px padding at top, <br> 35px padding at right, <br> 45px padding at bottom and <br> 50px padding at left.</p>
</body>
</html>

输出

我们可以看到段落元素在顶部、右侧、底部和左侧都有 padding。

演示 2

在本演示中，我们将使用 padding 的所有四个单独属性。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Padding individual properties</title>
    <style>
        .para1 {
            padding-top: 42px;
            border: 1px dashed rgb(255, 170, 0);
            background-color: rgb(242, 209, 143);
        }
        .para2 {
            padding-right: 36px;
            border: 1px dashed rgb(255, 170, 0);
            background-color: rgb(242, 209, 143);
        }
        .para3 {
            padding-bottom: 54px;
            border: 1px dashed rgb(255, 170, 0);
            background-color: rgb(242, 209, 143);
        }
        .para4 {
            padding-left: 24px;
            border: 1px dashed rgb(255, 170, 0);
            background-color: rgb(242, 209, 143);
        }
    </style>
</head>
<body>
    <h2>Padding Individual Properties</h2>
    <p class="para1">This is the paragraph element which has <br> 42px padding at top.</p>
    <p class="para2">This is the paragraph element which has <br> 36px padding at right.</p>
    <p class="para3">This is the paragraph element which has <br> 54px padding at bottom.</p>
    <p class="para4">This is the paragraph element which has <br> 24px padding at left.</p>
</body>
</html>

输出

我们可以在段落 1、段落 2、段落 3 和段落 4 中看到 padding-top、padding-right、padding-bottom 和 padding-left。

Margin

下一个 CSS 属性是"margin"，它在 HTML 元素周围提供空间。

margin 简写属性的语法

Margin: top right, bottom left;

上面语法中提到的"margin"是 margin 的简写属性，它接受所有四个值。

单独 margin 属性的语法

margin-top: length;
margin-right: length;
margin-bottom: length;
margin-left: length;

上面语法中的长度单位可以是 px、cm 等。

演示 1

在本演示中，我们将使用 margin 的简写属性。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Margin</title>
    <style>
        div {
        margin: 50px 55px 60px 75px;
        border: 1px solid #70d373;
}
    </style>
</head>
<body>
<h2>CSS Margin when all four sides are equal</h2>

<div>This element has a margin of 60px.</div>

<h2>CSS Margin when all four sides are different</h2>

<div>This element has a 50px margin at top, <br> 55px margin at right, <br> 60px margin at bottom and <br> 75px margin at left.</div>

</body>
</html>
</body>
</html>

输出

可以看到段落元素在顶部、右侧、底部和左侧的 margin。

演示 2

在本演示中，我们将使用 margin 的所有四个单独属性。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Margin individual properties</title>
    <style>
        .para1 {
            margin-top: 50px;
            border: 1px dashed rgb(3, 52, 42);
            background-color: rgb(188, 249, 237);
        }
        .para2 {
            margin-right: 65px;
            border: 1px dashed rgb(3, 52, 42);
            background-color: rgb(188, 249, 237);
        }
        .para3 {
            margin-bottom: 45px;
            border: 1px dashed rgb(3, 52, 42);
            background-color: rgb(188, 249, 237);
        }
        .para4 {
            margin-left: 39px;
            border: 1px dashed rgb(3, 52, 42);
            background-color: rgb(188, 249, 237);
        }
    </style>
</head>
<body>
    <h2>Margin Individual Properties</h2>
    <p class="para1">This is the paragraph element which has <br> 50px margin at top.</p>
    <p class="para2">This is the paragraph element which has <br> 65px margin at right.</p>
    <p class="para3">This is the paragraph element which has <br> 45px margin at bottom.</p>
    <p class="para4">This is the paragraph element which has <br> 39px margin at left.</p>
</body>
</html>

输出

这是输出，我们可以看到段落元素在顶部、右侧、底部和左侧的 margin。

Letter-spacing

此 CSS 属性在字母之间提供间距。它可以接受正值和负值。

语法

演示

我们将利用letter-spacing CSS 属性在字符之间创建间距。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>letter-spacing</title>
    <style>
        .letter1 {
            letter-spacing: 10px;
        }
        .letter2 {
            letter-spacing: 6px;
        }
    </style>
</head>
<body>
    <h2>letter-spacing</h2>
    <p class="letter1">This sentence has a gap of 10px between characters.</p>
    <p class="letter2">This sentence has a gap of 6px between characters.</p>
</body>
</html>

输出

我们可以在输出中看到两句带有字母间距的句子。

Word-spacing

此 CSS 属性用于在单词之间提供空间。

语法

演示

在本例中，我们将利用word-spacing CSS 属性在单词之间创建间距。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>word-spacing</title>
    <style>
        .word1 {
            word-spacing: 12px;
        }
        .word2 {
            word-spacing: 5px;
        }
    </style>
</head>
<body>
    <h2>word-spacing</h2>
    <p class="word1">This sentence has a gap of 12px between words.</p>
    <p class="word2">This sentence has a gap of 5px between words.</p>
</body>
</html>

输出

这是结果，我们可以看到两句带有单词间距的句子。

Line-height

line-height CSS 属性用于在行之间创建高度间距。

语法

图解

在本演示中，我们将利用line-height CSS 属性在行之间创建间距。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>line-height CSS property</title>
    <style>
        .line1 {
            line-height: 15px;
        }
        .line2 {
            line-height: 36px;
        }
    </style>
</head>
<body>
    <h2>line-height CSS property</h2>
    <h3>First paragraph</h3>
    <p class="line1">The lines of this paragraph consist of a height space of 15px between lines. The lines of this paragraph hold a height space of 15px between lines.</p>
    <h3>Second paragraph</h3>
    <p class="line2">The lines of this paragraph holds a height space of 36px between lines. The lines of this paragraph consist of a height space of 36px between lines.</p>
</body>
</html>

输出

这是输出，我们可以看到两段在行之间有高度间距的段落。

空白字符

此 CSS 属性用于在元素内设置空白。

语法

上面语法中的"whitespace"是 CSS 属性。它有多种值，如下所述

Normal：这是默认值，其中空白将合并为一个空白。
Pre：它用于保留所有空白。它会在换行符处换行。
Pre-wrap：它用于在需要时换行，并在换行符处换行。
Nowrap：空白将合并为一个空白。
pre-line：它用于将空白合并为一个空白，在需要时换行，并在换行符处换行。
Initial：它设置默认值。
Inherit：它用于继承父属性。

演示

在本演示中，我们将利用whitespace CSS 属性在行之间设置额外的空白。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>white-space</title>
    <style>
        .white1 {
            whitespace: normal;
        }
        .white2 {
            whitespace: pre;
        }
        .white3 {
            whitespace: nowrap;
        }
        .white4 {
            whitespace: wrap;
        }
    </style>
</head>
<body>
    <h1>white-space</h1>
    <h3>Paragraph 1</h3>
    <p class="white1">This paragraph demonstrates the normal whitespace.</p>
    <h3>Paragraph 2</h3>
    <p class="white2">This paragraph displays the pre whitespace.</p>
    <h3>Paragraph 3</h3>
    <p class="white3">This paragraph demonstrates the nowrap whitespace.</p>
    <h3>Paragraph 4</h3>
    <p class="white4">This paragraph is displaying the wrap whitespace.</p>
</body>
</html>

输出

在这里，在下面的输出中，我们可以看到有 4 个段落，其中段落 1、段落 3 和段落 4 在单词之间显示一个空白，但段落 2 显示两个空白。

Text-indent

text-indent CSS 属性用于为第一行创建空间。

语法

演示

在本演示中，我们将利用text-indent CSS 属性在段落的第一行开头创建一个间隙。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>text-indent CSS property</title>
    <style>
        .text1 {
            text-indent: 50px;
        }
        .text2 {
            text-indent: 100px;
        }
    </style>
</head>
<body>
    <h2>text-indent CSS property</h2>
    <p class="text1">This sentence contains a space of 50px in the first line. This sentence contains a space of 50px in the first line.</p>
    <p class="text2">This sentence holds a height space of 100px in the first line. This sentence consists of a height space of 100px in the first line.</p>
</body>
</html>

输出

这是下方给出的演示输出，我们可以看到两个段落的第一行文本缩进。

Grid-row-gap 和 Grid-column-gap

grid-row-gap CSS 属性在网格的行之间设置间隙，grid-column-gap CSS 属性在网格的列之间设置间隙。

语法

grid-row-gap: length;
grid-column-gap: length;

演示

在本例中，我们同时使用grid-row-gap和grid-column-gap CSS 属性在网格的行和列之间设置间隙。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>grid-row-gap and grid-column-gap CSS property</title>
    <style>
        body {
        margin: 20px;
        background-color: #e3ccf7;
    }
        .item {
        background-color: #ac6ee2;
        color: #e3ccf7;
        padding: 30px;
        font-size: 20px;
    }

    .grid {
        width: 42px;
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-row-gap: 24px;
        grid-column-gap: 24px;
        grid-template-rows: auto auto auto auto;
        grid-auto-flow: column;
    }
    </style>
</head>
<body>
    <h1>grid-row-gap and grid-column-gap CSS property</h1>
    <div class="grid">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>
        <div class="item">11</div>
        <div class="item">12</div>
    </div>
</body>
</html>

输出

在下方给出的输出中，可以看到网格中的行和列之间有 24px 的间隙。

Grid-gap

grid-gap 称为简写属性，它用于在网格的行和列之间创建空间。

语法

图解

我们将利用grid-gap CSS 属性在行和列之间设置间隙。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>grid-gap CSS property</title>
    <style>
        body {
        margin: 36px;
        background-color: #d1f7bf;
    }
        .item {
        background-color: #89e95d;
        color: #d1f7bf;
        padding: 36px;
        font-size: 24px;
    }


    .grid {
        width: 50px;
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-gap: 15px;
        grid-template-rows: auto auto auto auto;
        grid-auto-flow: column;
    }
    </style>
</head>
<body>
    <h1>grid-gap CSS property</h1>
    <div class="grid">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>
        <div class="item">11</div>
        <div class="item">12</div>
    </div>
</body>
</html>

输出

在下方给出的输出中，可以看到行和列之间有 15px 的间隙。

结论

在本文中，我们已经掌握了CSS 间距。我们已经掌握了 CSS 中的各种间距，如下所示：

Padding：它用于在 HTML 元素周围创建空间。
Margin：它用于在 HTML 元素周围创建外边距。
Letter-spacing：它用于在字母之间创建空间。
Word-spacing：它用于在单词之间创建空间。
Line-height：它用于在行之间创建空间。
Whitespace：它用于在元素内部创建空白。
Text-indent：它用于在第一行之前创建空间。
Grid-row-gap：它用于在行之间创建空间。
Grid-column-gap：它用于在列之间创建空间。
Grid-gap：它用于在行和列之间创建空间。

下一主题CSS Grid 响应式

CSS Spacing

填充 (Padding)

padding 简写属性的语法

单独 padding 属性的语法

演示 1

演示 2

Margin

margin 简写属性的语法

单独 margin 属性的语法

演示 1

演示 2

Letter-spacing

语法

演示

Word-spacing

语法

演示

Line-height

语法

图解

空白字符

语法

演示

Text-indent

语法

演示

Grid-row-gap 和 Grid-column-gap

语法

演示

Grid-gap

语法

图解

结论

联系信息

关注我们

教程

面试题

在线编译器

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 Spacing

填充 (Padding)

padding 简写属性的语法

单独 padding 属性的语法

演示 1

演示 2

Margin

margin 简写属性的语法

单独 margin 属性的语法

演示 1

演示 2

Letter-spacing

语法

演示

Word-spacing

语法

演示

Line-height

语法

图解

空白字符

语法

演示

Text-indent

语法

演示

Grid-row-gap 和 Grid-column-gap

语法

演示

Grid-gap

语法

图解

结论

相关帖子

CSS vs CSS3

CSS Prototyping

CSS Hover Transitions

Dotted Border CSS

Text Italic in CSS

CSS Aspect Ratio

CSS Second Child

CSS 中的背景图片叠加渐变

如何在 CSS 中创建固定表头

WebKit CSS

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器