在设计用户界面期间,有时填充(padding)和边距(margin)之间会发生混淆。它们用于提供额外的空间或间隙。边距和填充都以元素的四个面为目标,并且也可以在没有border属性的情况下工作,但是它们在许多方面有所不同。
padding和margin之间的主要区别是:
因此,当需要元素之间的空间时,最好使用空白;需要内部元素和父盒之间的空间时,请进行填充。
边距和填充之间的基本差异列表如下:
Margin | Padding |
---|---|
Margin被称为元素的外部空间,即Margin是元素边界之外的空间。 | Padding是元素的内部空间,即Padding是元素边界内部的空间。 |
可以将margin设置为auto | 无法将padding设置为auto。 |
它可以是负数或任何浮点数。 | 它不允许负值。 |
元素的样式(例如背景色)不会影响页边距。 | Padding受元素样式(例如背景色)的影响。 |
可以看到以下图像,以清除边距和填充之间的差异。在此图像中,边距表示边框外的区域,而填充边框表示边框内的区域。
链接:https://www.learnfk.comhttps://www.learnfk.com/css/margin-vs-padding.html
来源:LearnFk无涯教程网
分别讨论边距(Margin)和填充(Padding)。
Css Margin 属性定义元素周围的空间。它是完全透明的,没有任何背景色。
无涯教程可以使用 margin-top,margin-bottom,margin-left 和 margin-right 单独的属性来独立更改顶部,底部,左侧和右侧的边距。还可以通过使用速记 margin 属性来一次更改所有属性。
指定缩写 margin 属性的方法有以下四种:
缩写 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。
与 margin 属性不同, CSS padding 属性定义了元素内容和元素之间的空间边境,CSS Padding 受背景颜色的影响。
无涯教程可以使用 padding-top,padding-bottom,padding-left,和 padding-right 单独的属性来独立更改顶部,底部,左侧和右侧的填充。还可以使用速记 padding 属性一次更改所有属性。
有四种指定速记填充属性的方法,如下所示:
在此示例中,使用速记属性 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>
输出
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)