{
  "styles": {
    "title": {
      "font-style": "bold",
      "font-size": 15,
      "padding-top": 15,
      "padding-left": 10,
      "color": "#666",
      "background-color": "#ddd"
    },
    "subtitle": {
      "lines": 0,
      "font-size": 13,
      "padding-bottom": 4,
      "padding-left": 10,
      "color": "#999",
      "background-color": "#ddd"
    }
  },
  "layout": {
    "style": {
      "direction": "vertical"
    },
    "children": [
      {
        "type": "text",
        "class": "title",
        "style": {
          "text": "外边距"
        }
      },
      {
        "type": "text",
        "class": "subtitle",
        "style": {
          "html-text": "使用 <b>margin-left</b>, <b>margin-top</b>, <b>margin-right</b>, <b>margin-bottom</b> 分别指定四边的外边距，或使用 <b>margin</b> 同时指定四边的外边距。"
        }
      },
      {
        "children": [
          {
            "style": {
              "background-color": "#ccc"
            },
            "children": [
              {
                "style": {
                  "width": 50,
                  "height": 50,
                  "margin": 10,
                  "background-color": "blue"
                }
              }
            ]
          },
          {
            "style": {
              "background-color": "#ccc",
              "margin-left": 1
            },
            "children": [
              {
                "style": {
                  "width": 50,
                  "height": 50,
                  "margin-left": 10,
                  "margin-top": 15,
                  "margin-bottom": 5,
                  "margin-right": 20,
                  "background-color": "blue"
                }
              }
            ]
          }
        ]
      },
      {
        "type": "text",
        "class": "subtitle",
        "style": {
          "padding-top": 6,
          "html-text": "margin 可以指定为 <i>auto</i> 来使用剩余空间，可以利用这个特性来做居中、靠右等效果。"
        }
      },
      {
        "style": {
          "direction": "vertical"
        },
        "children": [
          {
            "style": {
              "height": 80,
              "background-color": "#ccc"
            },
            "children": [
              {
                "type": "text",
                "style": {
                  "margin": "auto",
                  "text": "居中"
                }
              }
            ]
          },
          {
            "style": {
              "height": 40,
              "background-color": "#ccc",
              "margin-top": 1
            },
            "children": [
              {
                "type": "text",
                "style": {
                  "text": "标题标题标题标题",
                  "margin-left": 10
                }
              },
              {
                "type": "text",
                "style": {
                  "text": "靠右",
                  "margin-left": "auto",
                  "margin-right": 10
                }
              }
            ]
          },
          {
            "style": {
              "height": 40,
              "background-color": "#ccc",
              "margin-top": 1
            },
            "children": [
              {
                "type": "text",
                "style": {
                  "text": "文字1",
                  "margin-left": 10
                }
              },
              {
                "type": "text",
                "style": {
                  "text": "文字2",
                  "margin-left": 10
                }
              },
              {
                "type": "text",
                "style": {
                  "text": "居中",
                  "margin": "auto"
                }
              },
              {
                "type": "text",
                "style": {
                  "text": "靠右",
                  "margin-right": 10
                }
              }
            ]
          }
        ]
      },
      {
        "type": "text",
        "class": "title",
        "style": {
          "text": "内边距"
        }
      },
      {
        "type": "text",
        "class": "subtitle",
        "style": {
          "html-text": "使用 <b>padding-left</b>, <b>padding-top</b>, <b>padding-right</b>, <b>padding-bottom</b> 分别指定四边的内边距，或使用 <b>padding</b> 同时指定四边的内边距。<br><font size='13' color='#E24810'>注意内边距仅对容器和 text 元素完全生效，其它元素如 image 等仅影响布局结果，绘制时不考虑内边距。</font>"
        }
      },
      {
        "style": {
          "align-items": "center",
          "padding": 10
        },
        "children": [
          {
            "type": "text",
            "style": {
              "text": "文字",
              "padding": 5,
              "color": "white",
              "background-color": "blue"
            }
          },
          {
            "style": {
              "background-color": "#ccc",
              "margin-left": 5,
              "padding-left": 10,
              "padding-top": 15,
              "padding-bottom": 5,
              "padding-right": 20
            },
            "children": [
              {
                "style": {
                  "width": 50,
                  "height": 50,
                  "background-color": "blue"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}