内外边距

辅助布局 - 内外边距

样式图例
示例代码
 &lt;view class=&quot;bg-white&quot;&gt;
    &lt;view class=&quot;padding bg-gray&quot;&gt;{size}的尺寸有xs/sm/df/lg/xl&lt;/view&gt;
    &lt;view class=&quot;flex flex-wrap padding solid-top&quot;&gt;
      &lt;view class=&quot;basis-df padding-bottom-xs&quot;&gt;外边距&lt;/view&gt;
      &lt;view class=&quot;basis-df padding-bottom-xs&quot;&gt;内边距&lt;/view&gt;
      &lt;view class=&quot;basis-df&quot;&gt;.margin-{size}&lt;/view&gt;
      &lt;view class=&quot;basis-df&quot;&gt;.padding-{size}&lt;/view&gt;
    &lt;/view&gt;
    &lt;view class=&quot;flex flex-wrap padding solid-top&quot;&gt;
      &lt;view class=&quot;basis-df padding-bottom-xs&quot;&gt;水平方向外边距&lt;/view&gt;
      &lt;view class=&quot;basis-df padding-bottom-xs&quot;&gt;水平方向内边距&lt;/view&gt;
      &lt;view class=&quot;basis-df&quot;&gt;.margin-lr-{size}&lt;/view&gt;
      &lt;view class=&quot;basis-df&quot;&gt;.padding-lr-{size}&lt;/view&gt;
    &lt;/view&gt;
    &lt;view class=&quot;flex flex-wrap padding solid-top&quot;&gt;
      &lt;view class=&quot;basis-df padding-bottom-xs&quot;&gt;垂直方向外边距&lt;/view&gt;
      &lt;view class=&quot;basis-df padding-bottom-xs&quot;&gt;垂直方向内边距&lt;/view&gt;
      &lt;view class=&quot;basis-df&quot;&gt;.margin-tb-{size}&lt;/view&gt;
      &lt;view class=&quot;basis-df&quot;&gt;.padding-tb-{size}&lt;/view&gt;
    &lt;/view&gt;
    &lt;view class=&quot;flex flex-wrap padding solid-top&quot;&gt;
      &lt;view class=&quot;basis-df padding-bottom-xs&quot;&gt;上外边距&lt;/view&gt;
      &lt;view class=&quot;basis-df padding-bottom-xs&quot;&gt;上内边距&lt;/view&gt;
      &lt;view class=&quot;basis-df&quot;&gt;.margin-top-{size}&lt;/view&gt;
      &lt;view class=&quot;basis-df&quot;&gt;.padding-top-{size}&lt;/view&gt;
    &lt;/view&gt;
    &lt;view class=&quot;flex flex-wrap padding solid-top&quot;&gt;
      &lt;view class=&quot;basis-df padding-bottom-xs&quot;&gt;右外边距&lt;/view&gt;
      &lt;view class=&quot;basis-df padding-bottom-xs&quot;&gt;右内边距&lt;/view&gt;
      &lt;view class=&quot;basis-df&quot;&gt;.margin-right-{size}&lt;/view&gt;
      &lt;view class=&quot;basis-df&quot;&gt;.padding-right-{size}&lt;/view&gt;
    &lt;/view&gt;
    &lt;view class=&quot;flex flex-wrap padding solid-top&quot;&gt;
      &lt;view class=&quot;basis-df padding-bottom-xs&quot;&gt;下外边距&lt;/view&gt;
      &lt;view class=&quot;basis-df padding-bottom-xs&quot;&gt;下内边距&lt;/view&gt;
      &lt;view class=&quot;basis-df&quot;&gt;margin-bottom-{size}&lt;/view&gt;
      &lt;view class=&quot;basis-df&quot;&gt;.padding-bottom-{size}&lt;/view&gt;
    &lt;/view&gt;
    &lt;view class=&quot;flex flex-wrap padding solid-top&quot;&gt;
      &lt;view class=&quot;basis-df padding-bottom-xs&quot;&gt;左外边距&lt;/view&gt;
      &lt;view class=&quot;basis-df padding-bottom-xs&quot;&gt;左内边距&lt;/view&gt;
      &lt;view class=&quot;basis-df&quot;&gt;.margin-left-{size}&lt;/view&gt;
      &lt;view class=&quot;basis-df&quot;&gt;.padding-left-{size}&lt;/view&gt;
    &lt;/view&gt;
  &lt;/view&gt;
微信小程序开发指南

内外边距

辅助布局 - 内外边距

页面列表
