一、邊距及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;
}

二、效果