基础教程：Hype 4元素面板 — 内边距

在上一章节中，详细讲解了在Hype 4交互动效制作软件元素面板中，如何设置对象的边框、边框的样式、颜色以及边角半径。本章节将讲述Hype 4 HTML5创作工具元素面板中，如何给对象设置补白（内边距）。

在Hype 4中，补白就是CSS3语言中的Padding，是指对象的内边距。在Web页面设计中，内边距是CSS盒模型中的重要属性。内边距在Web页面设计中是如此的重要，值得用一章的内容来讲述。

一、Web页面设计中的盒模型

在CSS盒模型中，计算对象的宽度和高度有两个标准——content-box（内容盒子）和border-box（边框盒子）。在Hype 4中，针对不同类型的元素，使用content-box和border-box来计算元素的宽度和高度。

1、content-box（内容盒子）

宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。也就是说，元素的真正宽度/高度 = 元素宽度/高度 + 内边距 + 边框宽度。元素的内容宽度和高度不受内边距和边框的影响。

图1：content-box盒模型

在Hype 4中，除多边形元素外，都采用content-box计算元素的宽度和高度。在默认情况下，内边距（补白）的值为0，表示没有内边距。内边距与边框宽度一样，会计算入对象的宽度和高度里面。

图2：Hype 4中的内边距

2、border-box（边框盒子）

为元素设定的宽度和高度就是元素的真实宽度和高度，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。也就是说，元素内容的宽度/高度 = 元素的真实宽度/高度 – 内边距 – 边框宽度。

元素内容的宽度和高度受到内边距和边框宽度的影响，但元素的宽度和高度不会受到影响发生变化。

图3：border-box盒模型

在Hype 4中，只有多边形采用了border-box来计算元素的宽度和高度。当给多边形添加边框或者内边距（补白），多边形的形状会缩小。要注意的是，内边距不在边框内，而是边框外。

图4：Hype 4多边形的边框和内边距

二、内边距（补白）在Hype 4中的应用

对于形状和图像来说，内边距（补白）是体现不出来的，它会作用到内容上，使形状和图像元素变大。

图5：Hype 4 形状和图像元素的内边距

对于文本元素和按钮元素来说，内边距（补白）可以使文字内容上下左右居中。例如：文本元素自带8px补白；按钮元素自带6px补白。

图6：Hype 4文本和按钮元素的内边距

三、小结

尽管在Hype 4中采用了图形模块的方式设计Web页面，已经大大淡化了盒模型在设计中的作用，但是小伙伴还是要清楚地认识到盒模型在设计中的重要性。

例如：元素内容要求宽度为100px，如果在度量面板设置对象宽度为100px，由于Hype 4默认形状元素有1px的边框宽度，这样元素内容的实际宽度只有98px，就不符合要求了。

所以在设置元素宽度和高度的时候，就要考虑盒模型的问题，这个元素的宽度和高度是否包含补白或者边框，这样给元素设置宽度和高度才是准确的。