尺寸与边距

在页面渲染时，Kraken 基于 W3C 的盒模型 将所有标签表示为一个个矩形的盒子。 每个盒子由四个部分组成，其作用由它们各自的边界所定义如图，与盒子的四个组成区域相对应，每个盒子有四个边界：内容边界 Content edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。

尺寸与边距 - 图1

对应 CSS 属性来说，width, height 描述标签的宽高，padding 描述标签的内边距，margin 描述标签的外边距。

Kraken 支持的与尺寸边距相关的所有属性请参考开发文档。

示例：

  1. <div>
  2.   {/* 固定尺寸 */}
  3.   <div style={{ width: '25vw', height: '100px', backgroundColor: 'pink' }}>
  4.     固定宽高
  5.   </div>
  7.   {/* 最小最大尺寸 */}
  8.   <div
  9.     style={{
  10.       width: '150px',
  11.       height: '200px',
  12.       minWidth: '180px',
  13.       maxHeight: '100px',
  14.       backgroundColor: 'lightblue',
  15.     }}
  16.   >
  17.     最小宽度 最大高度
  18.   </div>
  20.   {/* 内外边距 */}
  21.   <div
  22.     style={{
  23.       width: '200px',
  24.       height: '100px',
  25.       padding: '20px',
  26.       margin: '20px',
  27.       backgroundColor: 'lightgreen',
  28.     }}
  29.   >
  30.     内边距 外边距
  31.   </div>
  32. </div>

渲染效果：

尺寸与边距 - 图2
请选择以下任意一种方式预览：
1. 安装 Kraken CLI，然后复制以下命令到命令行中运行：
2. 在 Android 手机上先下载 Play Kraken App，然后打开 App 扫描下方二维码预览：
尺寸与边距 - 图3