Interface CSSStyleName
As a general rule, wherever it is possible
to provide a CSS styleName (such as Canvas.styleName or Button.baseStyle, your CSS style can specify border, margins, padding,
and any CSS attributes controlling background or text styling. You should not specify any CSS properties related to
positioning, clipping, sizing or visibility (such as "overflow", "position", "display", "visibility" and "float") - use
Smart GWT APIs for this kind of control.
Because text wrapping cannot be consistently controlled cross-browser from
CSS alone, you should use Smart GWT properties such as Button.wrap
instead of the corresponding CSS properties, when provided.
Content contained within Smart GWT components can use arbitrary CSS, with the caveat that the content should be tested on all supported browsers, just as content outside of Smart GWT must be.
Special note on CSS margins: wherever possible, use CSS padding and border in lieu of CSS
margins, or non-CSS approaches such as Layout.layoutMargin, Canvas.snapTo, or absolute positioning
(including specifying percentage left/top coordinates). We recommend this because CSS specifies a very complicated and
widely criticized "margin-collapse" behavior which has surprising effects when margins exist on both parents and
children. Compounding the problem, margins are implemented very differently on different browsers, especially when it
comes to HTML margins.
Note about CSS "box models"
The CSS "box model" defines whether the size applied to a DOM element includes padding, borders or margins, or whether such settings effectively increase the size of the component beyond the size specified in CSS.
In Smart GWT, the size configured for a component includes border, padding and margins if specified (in CSS terminology, the box model is "margin-box"). This allows CSS borders, margins and padding to be treated as purely visual properties with no effect on sizing or layout.