步骤13：使用CSS属性实现边距和填充

在上一步骤中，我们加入了Shell Control控件作为APP 的容器，我们发现其中的对像控件（比如按钮，输入框等）并没有自动填满容器窗口，比如，用户在使用手机，电脑桌面等不用IE浏览器时，不会自动调整对像的大小来调整边距，使用对像填充满屏幕，这样看起来不是那么好看，

在这一节中我们学习对像的一些属性，及CSS来添加边距和填充。

1.练习效果

2.源码

您可以在演练-步骤13中查看和下载所有文件。

webapp/view/App.view.xml

要布局面中，我们添加属性，使用CSS类 sapUiResponsiveMargin这样会在面板周围增加一些空间。我们必须将属性的宽度设置为 auto，否则会将边距添加到默认宽度100％并超过页面大小。

这时如果屏幕尺寸变小，可以看到边距也会自动变小了。可以看出，该边距是响应性的，并自动适应设备的屏幕尺寸。平板电脑的边距将较小，而纵向模式下的电脑屏幕也不会留下空白的空间。

边距可以添加到各种控件中，并且有许多不同的选项可用。我们甚至可以通过添加CSS类在按钮和输入字段之间,添加属性sapUiSmallMarginEnd的 按钮。

要单独设置输出文本的格式，我们从输入字段中删除说明，然后添加新的 TEXT控制具有相同的值。在这里，我们还使用一个小边距将其与其他内容对齐。同样，我们可以添加标准的填充CSS类来设置布局容器控件的内部，但是由于默认情况下已经带出了填充，因此此处不需要。

3.约定

• 最好能将标准SAPUI5 CSS类用于布局。这样更有得于开发用户管理。