图解CSS中padding、margin、border的区别及使用

首先从概念和属性的角度对三者有个初步认识

padding 设置或返回元素的内边距。

该属性可使用 1 到 4 种值：
如果规定一种值，比如：div {padding: 50px} - 所有四个内边距都是 50px。
如果规定两种值，比如：div {padding: 50px 10px} - 上内边距和下内边距是 50px，左内边距和右内边距是 10px。
如果规定三种值，比如：div {padding: 50px 10px 20px} - 上内边距是 50px，左内边距和右内边距是 10px，下内边距是 20px。
如果规定四种值，比如：div {padding: 50px 10px 20px 30px} - 上内边距是 50px，右内边距是 10px，下内边距是 20px，左内边距是 30px。

border 设置或返回元素的边框属性。

border-width 设置边框宽度
border-style 设置边框样式
border-color 设值边框颜色

margin 设置或返回元素的外边距。

该属性可使用 1 到 4 种值：
如果规定一种值，比如：div {margin: 50px} - 所有四个外边距都是 50px。
如果规定两种值，比如：div {margin: 50px 10px} - 上外边距和下外边距是 50px，左外边距和右外边距是 10px。
如果规定三种值，比如：div {margin: 50px 10px 20px}- 上外边距是 50px，左外边距和右外边距是 10px，下外边距是 20px。
如果规定四种值，比如：div {margin: 50px 10px 20px 30px} - 上外边距是 50px，右外边距是 10px，下外边距是 20px，左外边距是 30px。

通过盒子模型图来直观感受一下三者区别

代码及效果实例

<!doctype html>
<html><head><meta charset="utf-8"><title>box</title><style>body{/*背景为黑色*/background: #000;                  }.div1{width: 150px;height: 150px;/*div背景为图中蓝色*/background: #388ecb;/*border为图中的卡其色*/border: 20px solid burlywood;/*外边距30px*/margin: 30px;/*内边距30px*/padding: 30px;}</style></head>           <div class="div1">first div</div><div class="div1">second div</div></body>
</html>

下面是网页效果截图，可以看到，文字“first div”并没有在蓝色背景块的最上角，这个就是内边距的效果；蓝色和黑色之间的卡其色区域，为div的border边框效果；两个div质检有一定的距离，这个距离不是30+30=60px，而存在一定的外边距重叠，只有30px。

下面是去掉外边距和内边距的效果图，可以发现，内边距不影响div实际的宽和高，及width和height属性

图解CSS中padding、margin、border的区别及使用相关推荐

图解CSS的padding,margin,border属性
图解CSS的padding,margin,border属性(详细介绍及举例说明) 图解CSS的padding,margin,border属性 W3C 组织建议把所有网页上的对像都放在一个盒(box)中 ...
CSS的Padding, Margin, Border 的区别
HTML的元素 HTML语言定义了一系列的标签元素, 比如div, hr , ul , a 等等.粗略来分, 有以下几种类型: 块状元素: 以块的形式显示一个矩形区域, 可以定义自己的高度和宽度, 可 ...
css中padding和magin的区别
1.Margin 用来设置页面中一个元素所占空间的边缘到相邻元素之间的距离. 如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边. 如果只提供一个,将用于全部的四边. 如果提供两个 ...
CSS中：margin和padding的区别 margin:auto与margin: 0 auto区别
css中padding和margin的区别 margin 外边距 border 边框 padding 内边距 padding-left:10px; 左内边距.padding-right:10px; 右 ...
[css] css中padding和margin是相对于父元素还是子元素呢？
[css] css中padding和margin是相对于父元素还是子元素呢? padding就是往自己身体里塞东西(盒子里面),margin就是穿衣服(盒子外面). ==>padding相对于子 ...
css里dotted,CSS中dashed和dotted的区别有哪些
对于刚刚接触css的朋友们来说都会分不清dashed和dotted,那么你知道CSS中dashed和dotted的区别有哪些吗?那么针对这个问题爱站小编就为大家接受CSS中dashed和dotted的 ...
html页边距为负值,css中的padding属性可以为负值吗？css中padding属性的详解
关于css盒模型中的内边距padding属性的详细介绍,还有新手常犯的一个错误,内边距padding属性真的能写入负值.这个答案在文章的最后,现在就让我们一起来看这篇文章吧首先我们介绍的是第一个问题 ...
CSS中绝对定位和相对定位的区别及作用
CSS中绝对定位和相对定位的区别及作用针对定位的区别及使用我整理一些方法一.绝对定位二.相对定位三.绝对定位与相对定位的区别四.绝对定位与相对定位的使用结语针对定位的区别及使用我整理一些 ...
CSS中padding属性的参数顺序
CSS中padding属性的参数顺序 Padding属性是在网站建设的过程中是必不可少的,它的主要作用就是设定对象四边的补丁边距,padding可以说给我们带来的麻烦不少,最大的一个就是浏览器兼容性问 ...

图解CSS中padding、margin、border的区别及使用

图解CSS中padding、margin、border的区别及使用相关推荐

最新文章

热门文章