box model
Decrypting Margin, Border, and Padding Styles
When working with ADF Faces skins, JSF inlineStyles, or just CSS in general, you may have come across some explicit style definitions like this which is very easy to understand:
padding-top: 15px;
However, you may have also come across more cryptic style definitions like these but wonder which measurement applies to which side of the element:
padding: 1px 2px 3px 4px; padding: 5px 6px 7px; padding: 8px 9px; padding: 10px;
Here’s a key for decoding these definitions:
padding: top right bottom left; padding: top right/left bottom; padding: top/bottom right/left; padding: top/bottom/right/left;
This same pattern applies to margins and borders.
Aside from the cryptic definitions, see my other post displaying how the CSS Box Model treats margins, borders, and padding with respect to width and height dimensions. If you are an ADF Faces application developer be sure to also read the Layout Basics page.
Visualizing the CSS Box Model
Since the way web browsers deal with width and height is so non-intuitive, I’ve created this a handy guide showing how the CSS (Cascading Style Sheets) box model applies widths and heights when scrolling, margins, borders, and padding are involved:
