12px margin around entire page

Hello all; I am still new to Vaadin and I apologize if this is a simple one.

I’m trying to find out how to remove the 12px margin that seems to be around the entire baseline window.

Here is the DIV in the DOM tree for reference.


The item in bold has a margin and I am unclear how to remove that as it seems to have to do with.

mainView (MyApplicationView) is a CustomLayout.

public void init() {
	Window mainWindow = new Window("Csa Application");
	mainView = new MyApplicationView();

Any clue how to remove this 12px margin setting?

– Update

If I remove adding MainView I still get the margin so I’m assuming it’s part of Window

Ok, I found the root cause;

In all the themes this is done:

This seems a bit odd, yes I can override it but i’m curious why this padding was added. Even for a base application it puts a 12px border around the entire screen. Anyone know?

.v-verticallayout-margin-top {
padding-top: 12px;
.v-verticallayout-margin-right {
padding-right: 12px;
.v-verticallayout-margin-bottom {
padding-bottom: 12px;
.v-verticallayout-margin-left {
padding-left: 12px;

It’s caused by the layout inside the Window, which has margin on by default. You can say:

((VerticalLayout)) mainWindow.getContent()).setMargin(false);

Or even better, set your mainView as the content of your mainWindow:


Outstanding! Thank you so much!