SAPUI5 Walkthrough教程（十三）——边距和填充

我们的应用程序内容仍然粘在信箱的角落。为了微调布局，我们可以向在上一步中添加的控件添加边距和填充。
webapp/view/App.view.xml

<mvc:View
	controllerName="sap.ui.demo.walkthrough.controller.App"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc"
	displayBlock="true">
	<Shell>
		<App>
			<pages>
				<Page title="{i18n>homePageTitle}">
					<content>
						<Panel
							headerText="{i18n>helloPanelTitle}"
							class="sapUiResponsiveMargin"
							width="auto">
							<content>
								<Button
									text="{i18n>showHelloButtonText}"
									press=".onShowHello"
									class="sapUiSmallMarginEnd"/>
								<Input
									value="{/recipient/name}"
									valueLiveUpdate="true"
									width="60%"/>
								<Text
									text="Hello {/recipient/name}"
									class="sapUiSmallMargin"/>
							</content>
						</Panel>
					</content>
				</Page>
			</pages>
		</App>
	</Shell>
</mvc:View>

为了布局面板，这里添加了CSS类sapUiResponsive Margin，它将在面板周围添加一些空间。并且必须将面板的宽度设置为 auto，否则边距将添加到默认宽度 100% 并超过页面大小。
如果减小屏幕尺寸，则实际上可以看到边距也减小了。顾名思义，边距是响应式的，并适应设备的屏幕尺寸。平板电脑将获得较小的边距，而纵向模式下的手机将不会获得边距以节省这些小屏幕上的空间。
边距可以添加到各种控件中，并提供许多不同的选项。我们甚至可以通过在按钮中添加类 sapUiSmallMarginEnd 来在按钮和输入字段之间添加空格。
若要单独设置输出文本的格式，请从输入字段中删除说明，并添加具有相同值的新 Text 控件。在这里，我们还使用少量边距将其与其他内容对齐。同样，我们可以添加标准填充类来布局容器控件（例如我们的面板）的内部部分，但由于默认情况下它已经引入了填充，因此此处不需要这样做。
结果：pc端

手机端:

平板：