盒模型中padding、border、margin的区别

盒模型中padding、border、margin的区别

在CSS中，规定了一种基本设计模型——盒模型（也叫框模型），如图所示：

其中包含了四部分内容：element/元素（即图中文字）、padding/内边框（图中两个红色边框之间白色部分）、border/边框（蓝色区域）、margin/外边框（图中两绿色边框中间白色部分）。

区别：

1. element占据的就是字体本身的字号大小；
2. padding和margin 类似，指的是一段距离，只能设置上、下、左、右方向的一段长度，不能设置区域颜色；
3. 而border指的是一块区域，可以设置上下左右方向的长度，而且可以设置这段空间的颜色上下
4. padding、border、margin三者都可以对上、下、左、右四个方向设置不同的宽度。

下面对各项的语法规则做一个简单对比　　　　　　　　　　　　

font-size: 20px;	　　　　　　　　 　/*设置element的字号*/
padding-top:20px;		/*设置padding上框高度*/
padding-right:30px;		/*设置padding右框宽度*/
padding-bottom:40px;	　　　　　/*设置padding下框宽度*/
padding-left:50px;		/*设置padding左框宽度*/
margin: T R B L;		/*与padding用法基本相同，此处示例四个方向边框宽度的合并设置语法规则*/
border: size style color;	/*border也可像padding和margin设置不同方向边框的宽度，此处示例对border 一步设定大小、风格（斜体）、颜色。*/

　　

 

 

posted on 2017-11-10 23:18  Jesse_HOHO 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/Jesse-HOHO/p/7816886.html