微信小程序开发指南

基于ColorUI的组件化页面开发


内外边距

<h1>辅助布局 - 内外边距</h1> <ul> <li>样式图例</li> </ul> <p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=4dad91fba995d16aacac82e096580073&amp;file=file.png" alt="" /></p> <ul> <li>示例代码</li> </ul> <pre><code class="language-html"> &lt;view class="bg-white"&gt; &lt;view class="padding bg-gray"&gt;{size}的尺寸有xs/sm/df/lg/xl&lt;/view&gt; &lt;view class="flex flex-wrap padding solid-top"&gt; &lt;view class="basis-df padding-bottom-xs"&gt;外边距&lt;/view&gt; &lt;view class="basis-df padding-bottom-xs"&gt;内边距&lt;/view&gt; &lt;view class="basis-df"&gt;.margin-{size}&lt;/view&gt; &lt;view class="basis-df"&gt;.padding-{size}&lt;/view&gt; &lt;/view&gt; &lt;view class="flex flex-wrap padding solid-top"&gt; &lt;view class="basis-df padding-bottom-xs"&gt;水平方向外边距&lt;/view&gt; &lt;view class="basis-df padding-bottom-xs"&gt;水平方向内边距&lt;/view&gt; &lt;view class="basis-df"&gt;.margin-lr-{size}&lt;/view&gt; &lt;view class="basis-df"&gt;.padding-lr-{size}&lt;/view&gt; &lt;/view&gt; &lt;view class="flex flex-wrap padding solid-top"&gt; &lt;view class="basis-df padding-bottom-xs"&gt;垂直方向外边距&lt;/view&gt; &lt;view class="basis-df padding-bottom-xs"&gt;垂直方向内边距&lt;/view&gt; &lt;view class="basis-df"&gt;.margin-tb-{size}&lt;/view&gt; &lt;view class="basis-df"&gt;.padding-tb-{size}&lt;/view&gt; &lt;/view&gt; &lt;view class="flex flex-wrap padding solid-top"&gt; &lt;view class="basis-df padding-bottom-xs"&gt;上外边距&lt;/view&gt; &lt;view class="basis-df padding-bottom-xs"&gt;上内边距&lt;/view&gt; &lt;view class="basis-df"&gt;.margin-top-{size}&lt;/view&gt; &lt;view class="basis-df"&gt;.padding-top-{size}&lt;/view&gt; &lt;/view&gt; &lt;view class="flex flex-wrap padding solid-top"&gt; &lt;view class="basis-df padding-bottom-xs"&gt;右外边距&lt;/view&gt; &lt;view class="basis-df padding-bottom-xs"&gt;右内边距&lt;/view&gt; &lt;view class="basis-df"&gt;.margin-right-{size}&lt;/view&gt; &lt;view class="basis-df"&gt;.padding-right-{size}&lt;/view&gt; &lt;/view&gt; &lt;view class="flex flex-wrap padding solid-top"&gt; &lt;view class="basis-df padding-bottom-xs"&gt;下外边距&lt;/view&gt; &lt;view class="basis-df padding-bottom-xs"&gt;下内边距&lt;/view&gt; &lt;view class="basis-df"&gt;margin-bottom-{size}&lt;/view&gt; &lt;view class="basis-df"&gt;.padding-bottom-{size}&lt;/view&gt; &lt;/view&gt; &lt;view class="flex flex-wrap padding solid-top"&gt; &lt;view class="basis-df padding-bottom-xs"&gt;左外边距&lt;/view&gt; &lt;view class="basis-df padding-bottom-xs"&gt;左内边距&lt;/view&gt; &lt;view class="basis-df"&gt;.margin-left-{size}&lt;/view&gt; &lt;view class="basis-df"&gt;.padding-left-{size}&lt;/view&gt; &lt;/view&gt; &lt;/view&gt;</code></pre>

页面列表

ITEM_HTML