首先从概念和属性的角度对三者有个初步认识
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属性