CSS Note 1.5 边距及clip属性

一、边距及clip属性

1、margin外边距：margin本身不增加元素大小，给元素设定边距也起到了定位的作用

      margin:10px ;表示元素四个外边距为10px

      margin:10px 20px;表示元素的上下边距为10px，左右边距为20px

      margin:10px 20px 10px;表示元素的上边距为10px，左右边距为20px，下边距为10px

      margin:10px 20px 30px 40px;表示元素的上边距10px,右边距20px,下边距30px,左边距40px

2、padding内边距：padding则会增加元素大小，padding的属性赋值方法与margin相同

示例：

#div1{
width: 360px;
height: 240px;
background: rgba(125,125,125,0.5);
border-style: solid;
border-color: black;
position: absolute;
left: 20px;
top: 20px;
/*clip: rect(10px,172px,132px,10px);遵循顺时针规律定义裁剪矩形范围*/
}
#div2{
background: black;
width: 120px;
height: 80px;
/*position: absolute;这里的position起到的效果和margin一样*/
/*top: 10px;*/
/*left: 10px;*/
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
margin-left: 10px;
padding: 10px 10px;/*padding和border本身会增加元素的大小，所以在使用时得计算好，以免使元素变大*/
border: 10px;
border-style: solid;
border-color: green;
}

二、效果