css中有有一对经常是一起出现的属性：padding和margin，接下来我们以一个例子来看一下两个属性的作用及其区别。

实例演示：

使用属性前：

代码实现：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>paddingTest</title>
</head>
<style>.class1{height: 200px;width: 200px;background: red;}.class2{height: 100px;width: 100px;background: green;}.class3{height: 50px;width: 50px;background: blue;}
</style>
<body>
<div class="class1"><div class="class2"><div class="class3"></div></div>
</div>
</body>
</html>

页面效果：

在第二个div中使用margin属性：

代码更改：

.class2{height: 100px;width: 100px;background: green;margin-left: 10px;}

页面效果：

可以看到使用margin属性的div与其外部div产生了一段距离

在第二个div中使用padding属性：

代码更改：

.class2{height: 100px;width: 100px;background: green;padding-left: 10px;}

页面效果：

可以看到使用padding属性的div与其内部div产生了一段距离

总结：

margin控制的是外距离，而padding控制的是内距离。

【css】padding 和 margin的区别相关推荐

html中padding和margin的区别和用法与存在的bug消除
关于margin: 在需要border外侧添加距离时. 空白处不需要背景时. 相连的两个部分的地方需要加外边的边距时使用. 关于padding: 在需要border内侧添加距离时. 空白处需要背景时. ...
jsp+左间距_jsp 中padding 与margin的区别
本文向大家简单介绍一下 Margin 和 Padding 属性中四个值的先后顺序及区别, Margin 和 Padding 属性中四个值的顺序为:上右下左,按照顺时针方向罗列的. AD: 你对 Mar ...
android padding 和 margin的区别
前面两期我们学习了LinearLayout线性布局的方向.填充模型.权重和对齐,那么本期我们来学习LinearLayout线性布局的内边距和外边距. 关于padding和margin,很多同学傻傻分不 ...
属性padding和margin的区别
因为实际在使用中经常会遇到还是很容易搞混,不知道该如何去选择边距的情况,所以单独把这个课题拎出来调查,实践了一番. 1. margin,指的是当前控件和父控件的边距. 举一个例子说明: <Rel ...
CSS中：margin和padding的区别 margin:auto与margin: 0 auto区别
css中padding和margin的区别 margin 外边距 border 边框 padding 内边距 padding-left:10px; 左内边距.padding-right:10px; 右 ...
CSS 中的 margin、border、padding 区别（内边距、外边距）
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 图解CSS padding.margin.border属性 W3C组织建议把所有网页上的对像都放在一 ...
CSS中的margin、border、padding区别 CSS padding margin border属性详解
图解CSS padding.margin.border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...
CSS盒子模型（border、padding、margin、圆角边框、盒子阴影、文字阴影、新闻列表综合案例、新浪导航栏案例）
1. 网页布局的本质首先利用CSS设置好盒子的大小,然后摆放盒子的位置. 最后把网页元素比如文字图片等等,放入盒子里面. 以上两步就是网页布局的本质 2. 盒子模型(Box Model) 盒子模型 ...
从零开始学前端 - 7. CSS盒模型 margin和padding详解
作者: 她不美却常驻我心博客地址: https://blog.csdn.net/qq_39506551 微信公众号:老王的前端分享每篇文章纯属个人经验观点,如有错误疏漏欢迎指正.转载请附带作者信息 ...

【css】padding 和 margin的区别

实例演示：

使用属性前：

在第二个div中使用margin属性：

在第二个div中使用padding属性：

总结：

【css】padding 和 margin的区别相关推荐

最新文章

热门文章