在 CSS 中使用 margin 和 padding

Subodh Poudel 2023年2月20日 2021年10月30日
  1. CSS 中 margin 的介绍
  2. CSS 中 padding 的介绍
在 CSS 中使用 margin 和 padding

在 CSS 中,marginpadding 可能看起来很相似,但它们是不同的。本教程将介绍 CSS 中的边距和填充。然后我们将知道它们之间的区别,并学习何时使用边距和填充。

CSS 中 margin 的介绍

在 CSS 中,边距是任意两个相邻元素之间的空间。它是两个相邻元素的边界之间的空间。任何元素的边距不控制元素内部的空间。相反,它负责元素外部的空间。我们使用 margin 属性来指定元素所有四个边的边距。我们在 margin 属性中写入四个值。这些值依次表示 margin-topmargin-rightmargin-bottommargin-left。我们可以说明如下。

element {
margin: 20px 20px 20px 20px;
}

上面的代码从所有四个边设置元素的 20px 边距。

当我们只使用这三个值时,中间的值代表 margin-leftmargin-right 属性。如果 margin 属性只有两个值,第一个值表示顶部和底部的边距,第二个值表示左右边距。单个边距值表示所有四个边的边距。

现在,让我们演示一下什么是边距。例如,创建两个带有 redboxbluebox 作为它们的类的 div。为每个类提供 heightwidth 200px。将框的 background-color 设置为 redblue。然后,将顶部框 redboxmargin-bottom 属性设置为 20px

下面的示例创建两个红色和蓝色框。margin-bottom 属性从底部方向的红色框的边框提供 20px 的空间。这意味着蓝色框与红色框的距离为 20px。如果我们删除 margin-bottom 属性,空间将被删除,两个框将自行连接。请注意,两个框中的文本都附加到框的边框,左侧和顶部没有空格。

示例代码:

<div class="redbox"> Red Box </div>
<div class="bluebox"> Blue Box </div>
.redbox {
 height:200px;
 width: 200px;
 background-color:red;
 margin-bottom:20px;
}

.bluebox {
 height:200px;
 width: 200px;
 background-color:blue;
 color:white;
}

如果我们想更改网页中元素的位置,可以使用 CSS 边距。使用 margin 属性,我们可以将元素向左、向右、顶部和底部移动。当我们需要指定两个相邻元素之间的距离时,就会用到边距。我们在上面的例子中已经说明了它。我们甚至可以在元素中使用负边距值来创建重叠效果。这些是 CSS 边距的一些用例。

CSS 中 padding 的介绍

填充是元素边框到元素内容之间的空间。它是元素内部的空间,它无法控制元素外部的区域。我们使用 padding 属性来设置元素的填充。我们可以使用四个值、三个值、两个值和一个值来表示元素的填充。填充表示在方向上类似于边距表示。我们可以说明如下。

margin: 20px 20px 20px 20px;

上面的代码在所有方向上设置了 20px 的内边距。

现在让我们通过一个例子来演示 CSS padding 的实际用法。我们将在这里使用与上面相同的 HTML 结构。在 CSS 中,选择 div 并指定 200px 的高度和宽度以及 50pxpadding-top。选择各个类并为它们提供 background-color 属性的相应值。

在下面的示例中,两个框是附加的,与上面的边距示例不同。但是,我们可以在两个框中的每个文本上方看到一些空间。这就是 padding 的作用。将 padding-top 属性设置为 20px 会增加 50px 从文本到框顶部的空间。

示例代码:

<div class="redbox"> Red Box </div>
<div class="bluebox"> Blue Box </div>
div{
 height:200px;
 width: 200px;
 padding-top:50px;
}
.redbox {
 background-color:red;
}

.bluebox {
 background-color:blue;
 color:white;
}

我们可以使用 CSS padding 来指定元素内容与其边框之间的空间。我们还可以使用填充来增加元素的大小。当我们增加 padding 值时,内容和边框之间的空间会增加。结果,元素的大小也会增加,从而保持内容的大小不变。

Subodh Poudel avatar Subodh Poudel avatar

Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.

LinkedIn