CSS - Margin Vs Padding

CSS - Margin Vs Padding 首页 / CSS入门教程 / CSS - Margin Vs Padding

在设计用户界面期间,有时填充(padding)和边距(margin)之间会发生混淆。它们用于提供额外的空间或间隙。边距和填充都以元素的四个面为目标,并且也可以在没有border属性的情况下工作,但是它们在许多方面有所不同。

padding和margin之间的主要区别是:

  • Padding   -  提供边框和元素内容之间的空间。
  • Margin     -  在边框和外部元素之间提供空间。

因此,当需要元素之间的空间时,最好使用空白;需要内部元素和父盒之间的空间时,请进行填充。

边距和填充之间的基本差异列表如下:

无涯教程网

MarginPadding
Margin被称为元素的外部空间,即Margin是元素边界之外的空间。Padding是元素的内部空间,即Padding是元素边界内部的空间。
可以将margin设置为auto无法将padding设置为auto。
它可以是负数或任何浮点数。它不允许负值。
元素的样式(例如背景色)不会影响页边距。Padding受元素样式(例如背景色)的影响。

可以看到以下图像,以清除边距和填充之间的差异。在此图像中,边距表示边框外的区域,而填充边框表示边框内的区域。

保证金 v/s 填充

分别讨论边距(Margin)和填充(Padding)。

Margin

Css Margin 属性定义元素周围的空间。它是完全透明的,没有任何背景色。

无涯教程可以使用 margin-top,margin-bottom,margin-left margin-right 单独的属性来独立更改顶部,底部,左侧和右侧的边距。还可以通过使用速记 margin 属性来一次更改所有属性。

指定缩写 margin 属性的方法有以下四种:

  • margin:50px 100px 150px 200px;   -  它表示顶部(top)边距值为50px,右侧(right)边距值为100px,底部(bottom)边距值为150px和左侧(left) margin 值为200px。
  • margin:50px 100px 150px;                 -   它表示顶部(top)边距值为50px,左侧(left)右侧(right)边距值为100px,底部(bottom)边距150像素。
  • margin:50px 100px;                              -   它表示顶部(top)底部(bottom)的边距值为50px,左(left)右(right)的边距值为100px。
  • margin:50px;                                         -   它将顶部(top),右侧(right),底部(bottom)左侧(left)边距设置为相等的值。

缩写 margin 属性的示例如下所示:

<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: lightskyblue;
font-size: 20px;
border: 3px solid red;
}
p.margin {
margin: 50px 100px 150px 200px;
}
</style>
</head>
<body>
<p>This paragraph is displayed without specified margin. </p>
<p class = "padding">This paragraph is displayed with specified margin.
margin: 50px 100px 150px 200px;
</p>
</body>
</html>

在以下输出中,可以在屏幕上看到一个滚动条。这是因为 margin-bottom 的值为150px。

保证金 v/s 填充

Padding

margin 属性不同, CSS padding 属性定义了元素内容和元素之间的空间边境,CSS Padding 受背景颜色的影响。

无涯教程可以使用 padding-top,padding-bottom,padding-left, padding-right 单独的属性来独立更改顶部,底部,左侧和右侧的填充。还可以使用速记 padding 属性一次更改所有属性。

有四种指定速记填充属性的方法,如下所示:

链接:https://www.learnfk.comhttps://www.learnfk.com/css/margin-vs-padding.html

来源:LearnFk无涯教程网

  • padding:50px 100px 150px 200px;  -  表示顶部(top)填充值为50px,右侧(right)填充值为100px,底部(bottom)填充值为150px和左侧(left) 填充值为200px。
  • padding:50px 100px 150px;                -  表示顶部(top)填充值为50px,左(left)右(right)填充值为100px,底部(bottom)填充值为150像素。
  • padding:50px 100px;                             -  它表示顶部(top)底部(bottom)填充值为50px,左侧(left)右侧(right)填充值为100px。
  • padding:50px;                                        -  它设置顶部(top),右侧(right),底部(bottom)左侧(left)填充的相等值。

在此示例中,使用速记属性 padding 指定内容和边框之间的间隔。

<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: lightskyblue;
font-size: 20px;
border: 3px solid red;
}
p.padding {
padding: 100px 100px 150px 50px;
}
</style>
</head>
<body>
<p>This paragraph is displayed without specified padding. </p>
<p class = "padding">This paragraph is displayed with specified padding.<br>
<b>padding: 100px 100px 150px 50px; </b>
</p>
</body>
</html>

输出

保证金 v/s 填充

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

持续交付36讲 -〔王潇俊〕

深入拆解Java虚拟机 -〔郑雨迪〕

高并发系统设计40问 -〔唐扬〕

视觉笔记入门课 -〔高伟〕

Selenium自动化测试实战 -〔郭宏志〕

实用密码学 -〔范学雷〕

零基础学Python(2023版) -〔尹会生〕

AI绘画核心技术与实战 -〔南柯〕

Rust 语言从入门到实战 -〔唐刚〕

好记忆不如烂笔头。留下您的足迹吧 :)