public interface CSSStyleName
As a general rule, wherever it is possible
to provide a CSS styleName (such as styleName
or 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 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 layoutMargin
, 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.