小程序样式课程-第27课-框模型-外边距合并

<!---定义两个宽200px；高100px的背景不同的内框-->

<view class='cls1'>

  <view class='cls2-a'>

    区块1

  </view>

  <view class='cls2-b'>

    区块2

  </view>

</view>

<view class='cls1'>

  <view class='cls2-a'>

     <!---定义两个长宽80px内框，内边距10px-->

     <view class='cls3-a'>

        区块3-a

     </view>

     <view class='cls3-b'>

        区块3-b

     </view>     

  </view>

  <view class='cls2-b-1 '>

     <!---定义两个长宽80px内框，外边距10px；中间的外边距会合并-->

     <view class='cls4-a'>

        区块4-a

     </view>

     <view class='cls4-b'>

        区块4-b

     </view>

  </view>

</view>

.cls1{

  background-color: gainsboro;

  display: flex;

  flex-direction: row;

}

.cls2-a{

  width: 100px;

  height: 200px;

  background: goldenrod;

}

.cls2-b{

  width: 100px;

  height: 200px;

  background:gray;

}

.cls2-b-1{

  width: 100px;

  height: 200px;

  background: black;

}

.cls3-a{

  width: 80px;

  height: 80px;

  background:  bisque;

  padding: 10px;

}

.cls3-b{

  width: 80px;

  height:80px;

  background: coral;

  padding: 10px;

}

.cls4-a{

  width: 80px;

  height: 80px;

  background:  bisque;

  margin: 10px;

}

.cls4-b{

  width: 80px;

  height:80px;

  background: coral;

  margin: 10px;

}