box model

Decrypting Margin, Border, and Padding Styles

Posted on Updated on

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.

This entry was posted in css, jsf and tagged , , , , .

Visualizing the CSS Box Model

Posted on Updated on

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:

CSS Box Model

This entry was posted in css, html and tagged , , .