如果你不知道margin和padding是什麼，請看這篇文章，一看就懂

想要知道它是什麼，就要知道它就什麼名字

margin：外邊距

padding：內邊距

       我們就可以這麼理解：邊以外的距離是外邊距，邊以內的距離是內邊距。

請看圖：

現在用代碼試一下：

<view class="con">
  <view class="test1">
    正方形
  </view>

  <view class="test2">
    長方形
  </view>
</view>

.test1{
  width: 100rpx;
  height: 100rpx;
  border:5px solid red;
}

.test2{
  width: 100rpx;
  height: 200rpx;
  border:5px solid green;
}

       看圖我們知道，紅色、綠色方框都是貼近容器邊緣的，想把它們往右移一下，因爲這是邊框的外面，所以調節的是外邊距，也因爲是邊框的左邊是邊緣，所以更準確的說是調節外邊框的左邊。

代碼截圖1：

變化1：

       想把它們兩個分開100px，只需要調節紅邊框的底部外邊距或綠邊框的頂部外邊距。

注意：當兩個一起調節時，距離不是疊加的。而是以大的距離爲主。

代碼截圖2：

變化2：

       我們想把“正方形”，“長方形”移到邊框中間。因爲“正方形”，“長方形”都在邊框的內部，所以是調節內邊距。

代碼截圖3：

變化3：

爲了代碼簡潔，還有以下用法。

        margin和padding的用法相同，只列舉 margin

	margin:10px 5px 15px 20px; 

				上邊距是 10px 
				右邊距是 5px 
				下邊距是 15px 
				左邊距是 20px 

	margin:10px 5px 15px;

				上邊距是 10px 
				右邊距和左邊距是 5px 
				下邊距是 15px 

	margin:10px 5px;

				上邊距和下邊距是 10px 
				右邊距和左邊距是 5px 

	margin:10px;

				所有四個邊距都是 10px