From the docs: Vertical Layout | Components | Vaadin Docs
Even with spacing disabled, there is still spacing between the components.
I’m experiencing the same in my application; I have a VerticalLayout with setSpacing(false), containing other layouts, and I get spacing between the child layouts.
Btw, I tried to check if the same was true with HorizontalLayout, but there the spacing examples didn’t display.
What you see in that screenshot is not spacing between layout slots but margins inside the slots.
Set margin: 0 for all the buttons, and then the sample looks like this:
Likewise, most Vaadin field components (TextField, Select, …) have a margin.
And I guess the reason this isn’t visible with the Horizontal Layout is that the default margin of 0.25rem is applied only to the top and bottom of the button, the left and right margins are 0.
Doh! I tricked myself, both because I was looking for a simple example to demonstrate my real issue, and because when I click on it, the browser devtool selected the internal <div class=“vaadin-button-container”>, which has no margins. My mistake.
My issue looked the same, but had a different cause.
After a bit more digging I found it. Completely my own fault. At some point added this to my css:
vaadin-vertical-layout.screen, vaadin-vertical-layout.layout, vaadin-horizontal-layout.layout {
gap: var(--lumo-space-l);
}
Did exactly what it says. I had just forgotten 
Doesn’t look like “gap” shows in FireFox devtools layout/computed, which is a shame
Actually, they have padding. Not margin. ;)
You can also use the utility classes to set the gap, e.g. verticalLayout.addClassName(LumoUtility.Gap.LARGE);