Problem - embedded picture pushes the adjacent elements

Flow
1

I welcome!

Faced with this problem. Title of a certain application has the form -
11909.png

2

It would be nice if the title directly from a present image, for example, as shown in figure -
11910.png

3

But when I try to use this code -


...
private HorizontalLayout createHeader() {
    HorizontalLayout h = new HorizontalLayout();
    //h.setStyleName("mainLayout");
    h.setWidth("100%");
    h.setHeight("32px");
    
    h.setMargin(true, false, false, true);
    h.setSpacing(false);
    
    Embedded em = new Embedded("", new ThemeResource("../chartdemo/img/logo-2.png"));
    em.setStyleName("v-embedded-logo");
    h.addComponent(em);
    h.setComponentAlignment(em, Alignment.TOP_LEFT);
    h.setExpandRatio(em, 0.1f);
    
    Label title = new Label("Интегрированная маркетинговая система КСУМ \"МаркСист\"");                                        
    title.setSizeFull();
    title.setStyleName("v-label-app-title");
    h.addComponent(title);
    h.setExpandRatio(title, 1);
    
    Label subtitle = new Label("Информационная панель");
    subtitle.setSizeFull();
    subtitle.setStyleName("v-label-subapp-title");
    h.addComponent(subtitle);
    h.setExpandRatio(subtitle, 1);

    return h;
}

...

…picture appears, but not somewhere where we would like -
11911.png

4

I would be grateful for your advice! :smiley:

5

For example, the sampler displays the image as needed -
11912.png

6

I dentified CSS rules so -


.v-embedded-logo {
   margin: 0px;
   padding-top: 0px;
   padding-left: 0px;   
}

Slightly modified the Java code -


...
    Embedded em = new Embedded("", new ThemeResource("../chartdemo/img/logo.png"));
    em.setStyleName("v-embedded-logo");
    h.addComponent(em);
//    h.setComponentAlignment(em, Alignment.TOP_LEFT);
//    h.setExpandRatio(em, 0.1f);
...

Under the debugger shows that my logo is shifted downwards -
11920.png

7

One solution is found -


...
    h.setMargin(true, false, false, true);
    h.setSpacing(false);
    
    HorizontalLayout l = new HorizontalLayout();
    l.setWidth("100px");
    l.setHeight("60px");
    l.setMargin(false, false, false, true);
    l.setSpacing(false);

    h.addComponent(l);
    
    Embedded em = new Embedded("", new ThemeResource("../chartdemo/img/logo.png"));
    em.setStyleName("v-embedded-logo");    
    l.addComponent(em);
    l.setComponentAlignment(em, Alignment.TOP_LEFT);
...


.v-embedded-logo {
   float: left;	
   margin: -25px;
   padding-top: 0px;
   padding-left: 17px;   
}

11922.png