'Adding two Labels but they have no space between them

I have added to my layout two labels:

Div container = new Div();
container.add(new Label(getTranslation(MessageConstants.SOME_DESCRIPTION)));
container.add(new Label(getTranslation(MessageConstants.MORE_DESCRIPTION_TEMPLATE, valueToAdd)));
add(container);

But this results in having no space between the labels. This looks bad, see image:

Screenshot

What is the best way to avoid this without combining both translation labels?

javavaadin


Solution 1:[1]

There are several ways to add a space between the two labels. But one way is to add some right padding to the first component like so:

Div container = new Div();
Label firstLabel = new Label("first");
firstLabel .getStyle().set("padding-right", "10px");
container.add(firstLabel);
container.add(new Label("second"));

Solution 2:[2]

and should not -> please see Browser Inspector (padding, margins)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Tarek Oraby
Solution 2 gidravlic

Related Questions