Prev | Current Page 136 | Next

Charles Wyke-Smith

"Stylin' with CSS: A Designer's Guide 2nd Edition"

Note, however, that adding
borders can alter the layout because borders add dimension to
the element, which may or not matter, depending on where that
element is in your layout. An alternate way to display a box is to add
Shorthand Styling
It gets tedious to write a separate style for each of the four sides of an element, whether you are specifying margins,
padding, or borders. CSS offers some shorthand ways to specify these, one after another within a single declaration. In
such a declaration, the order of the sides of the box is always top, right, bottom, left. You can remember this as TRouBLe,
which you will be in if you forget, or you can visualize the order as the hands on a clock going around from 12. So, if you
want to specify the margins on an element, instead of writing
{margin-top:5px; margin-right:10px; margin-bottom:12px; margin-left:8px;}
you can simply write
{margin:5px 10px 12px 8px;}
Note that there is just a space between each of the four values; you don??™t need a delimiter such as a comma. You don??™t
have to specify all four values??”if you don??™t provide one, the opposite side??™s value is used as the missing value.
{margin:12px 10px 6px;}
In this example, because the last value, left, is missing, the right value is used and the left margin is set to 10px.
In this next example
{margin:12px 10px;}
only the ?¬? rst two values, top and right, are set, so the missing values for bottom and left are set to 12px and 10px, respectively.


Pages:
124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148