Webix allows setting borders, margin and padding to the components and layout blocks. They should be specified within layout blocks and components to which you wish to apply the settings.
Within the form component borders are set in the same way.
Borders can be applied to:
Border type is set by the type parameter.
webix.ui({
type:"space",
rows:[
{ ... },
{ ... }
]
});
By default rows and columns feature thin borders, which can as well be set manually as type: 'line'. To completely rid of borders you should either set a 'clean' type or add borderless:true parameter.
Note that the chosen border, or borderless state is applied only the the layout block it's defined for it's children still feature the default border. You should set a border for them manually:
webix.ui({
container:"divD",
type:"space",
rows:[
{ template:"text", borderless:true },
{ ... }
]
});
Here layout rows feature space border while a template that lies in one of these rows is borderless.
Margin specifies space from the view to the left inner border of its parent container (set "margin-left" property) while padding sets the offset from the component contents to its borders.
webix.ui({
type:"space",
margin:30,
padding:20,
cols:[{ }]
});
Padding can be set separately in horizontal and vertical modes: