小程序应用

根据基础语法，下面在微信小程序中实现定义组件的外边距。

.wxml文件代码示例

小白教程网www.2d5.net

<!--外框就定义背景，内框定义个一个长宽都是100px带背景的。-->
<view>
  <view>默认文本，不带外边距</view>
</view>
 
<view></view><!--高度3的空白行-->
<view>
  <view>默认文本，带外边距10px;</view><!--外边距定义10px-->
  <!--要实现内框外面都是灰色见下面代码：外框定义内边距来实现-->
</view>
 
<view></view><!--高度3的空白行-->
<view>
  <view>默认文本</view>
</view>

.wxss文件代码示例

小白教程网www.2d5.net

.cls1-a{ /*外框*/
   background-color: gray;
}
.cls1-b{ /*内框*/
   background-color: gainsboro;
   width: 100px;
   height: 100px;
}
 
.hr{min-height: 3px;} /*高度3的空白行*/
.cls1-c{ /*内框*/
   background-color: gainsboro;
   width: 100px;
   height: 100px;
   margin: 10px;
}
 
.cls2-a{ /*外框*/
   background-color: gray;
   padding: 10px; /*要实现内框外面都是灰色见：外框定义内边距来实现*/
}
.cls2-b{ /*内框*/
   background-color: gainsboro;
   width: 100px;
   height: 100px;
}

效果如图4-7所示。