如何消除Vaadin中Icon与Label组件之间的间距？

你的代码存在几个导致Icon和Label间出现间距的问题：

1. 错误设置了setExpandRatio：你给stpIMG和subTitle分别设置了1和2的扩展比例，结合HorizontalLayout固定的650px宽度，会让两个组件按比例分配剩余空间，自然产生空隙。
2. Label组件默认内边距/外边距：Vaadin的Label自带默认padding和margin，会让组件自身占用额外空间。
3. img标签默认样式：HTML的img标签默认可能带有边距，且未设置垂直对齐，会和文本产生错位与间距。

修正后的代码 #

Label subTitle = new Label("nel cammin di nostra vita mi trovai in selva oscura");
// 移除Label默认边距
subTitle.addStyleName("no-padding-margin");

Label stpIMG = new Label();
stpIMG.setContentMode(ContentMode.HTML);
// 给img标签添加无间距+垂直对齐样式
stpIMG.setValue("<img src=\"VAADIN/themes/valo/images/sprite_svg_all.svg#ristampa\" style=\"margin:0; padding:0; vertical-align:middle;\">");
stpIMG.setWidth("30px");
stpIMG.setHeight("20px");
// 移除Label默认边距
stpIMG.addStyleName("no-padding-margin");

HorizontalLayout subTitleLayout = new HorizontalLayout(stpIMG, subTitle);
// 移除扩展比例，让组件紧凑排列
// subTitleLayout.setExpandRatio(stpIMG, 1);
// subTitleLayout.setExpandRatio(subTitle, 2);

subTitleLayout.setWidth("650px");
subTitleLayout.setSpacing(false);
// 关闭布局默认外边距（若存在）
subTitleLayout.setMargin(false);

mainLayout.addComponents(subTitleLayout);

补充主题样式（在Valo主题CSS文件中添加） #

.no-padding-margin {
    padding: 0 !important;
    margin: 0 !important;
}

额外提示 #

如果使用Vaadin 8及以上版本，更推荐使用Icon组件替代HTML img标签，能更好地与Label对齐且减少样式冲突，示例：

Icon stpIcon = new Icon(VaadinIcons.PRINT); // 替换为你的SVG图标
stpIcon.setSize("20px");
stpIcon.addStyleName("no-padding-margin");

内容的提问来源于stack exchange，提问作者fraaanz