【问题标题】：Adjust amount of spacing between Vaadin widgets调整 Vaadin 小部件之间的间距量
【发布时间】：2014-08-03 17:15:33
【问题描述】：

Vaadin 间距

Vaadin 布局有一种方法setSpacing( true ) 可以将小部件彼此分开。在大多数情况下效果很好。但是在有多个 Table 对象的情况下，还是有点太拥挤了。

➜ 有什么方法可以增加特定布局中使用的间距量吗？

CSS

我希望答案是对 CSS 的调整。在Layout Formatting 的Book of Vaadin 页面中，最后一节Layout Margins 讨论了CSS 的边距。但我找不到关于 CSS 间距的讨论。

【问题讨论】：

【解决方案1】：

是的，您可以增加 Vaadin 组件/小部件之间的间距。如何做到这一点取决于特定类型的布局。因此，请参阅每种布局的文档。

对于HorizontalLayout and VerticalLayout，将.v-spacing 选择器与height 或width 规则一起使用。

.v-vertical > .v-spacing {
    height: 30px;
}

.v-horizontal > .v-spacing {
    width: 50px;
}

【讨论】：

【解决方案2】：

在您编译的 css 文件中：

.YourThemeName.v-app .v-vertical > .v-spacing {
    height: 30px;
}

【讨论】：

需要主题名称和应用选择器的间距规则有什么特别之处吗？我的 Vaadin 7.3 应用程序中的其他规则不需要这个，我在由 NetBeans 8 的 Vaadin 插件 1.1.1 创建的 mytheme.scss 文件中编写规则。我的规则很简单：.example-gridlayout { border: medium dotted greenyellow; }