Nested layouts with spacing

I would like to control spacing for a specific VerticalLayout. I can do this using e.g.

.my-layout .v-verticallayout-spacing-on {
    padding-top: 3em;
}

But the issue is that this also controls spacing for VerticalLayouts nested inside this layout. I’ve tried using

.my-layout > .v-verticallayout-spacing-on {
    padding-top: 3em;
}

and

.my-layout-spacing-on {
    padding-top: 3em;
}

but none of those work. How can I adjust the spacing for just that outer VerticalLayout without possible influencing any nested layouts?

Thanks
Herman

To do this:

.my-layout > .v-verticallayout-spacing-on

v-verticallayout-spacing-on has to be directly inside my-layout. My guess there is a div in between. Check the DOM for the structure. If the case is that there is
one
div, then the correct way to do it would be:

.my-layout > div > .v-verticallayout-spacing-on

another way to do it is this:

.my-layout .v-verticallayout-spacing-on {
    padding-top: 3em;
}

.my-layout .v-verticallayout-spacing-on .v-verticallayout-spacing-on {
    padding-top: 7px; /* or what the default spacing size was */
}

This means that the 3em hits the first spacing div inside my-layout, but all after that will use the 7px. Not a very neat solution so I’d go with the first, if all the supported browsers of your software can handle the > sign.

The trouble is, I don’t see a div with .v-verticallayout-spacing-on in the DOM. My guess is that vaadin is removing that style since it is adding padding (in calculated pixels, the 3em becomes 20px) to each div to mimic spacing.

UPDATE: indeed, the Book of Vaadin mentions this:

UPDATE2: I tried your example using a single div in between, and it works. But it is not documented so I don’t know how reliable it is since the .verticallayout-spacing-on style does not appear in the final DOM. I feel that there should be a more explicit way of specifying the spacing for a certain layout instance.

I can’t use this solution because I would be overriding the spacing that some of the nested components may want to set explicitly. I don’t even know beforehand what those nested components are since the outer layout component is reused. The inner components can even be add-ons over which I don’t have any control. So I need a solution that just impacts that specific layout.