HTML and CSS Reference
In-Depth Information
Click here to view code image
1. div {
2. margin: 10px 20px 0 15px ;
3. }
Using the margin or padding property alone, with any number of values, is considered
shorthand. With longhand, we can set the value for one side at a time using unique prop-
erties. Each property name (in this case margin or padding ) is followed by a dash and
the side of the box to which the value is to be applied: top , right , bottom , or left .
For example, the padding-left property accepts only one value and will set the left
padding for that element; the margin-top property accepts only one value and will set
the top margin for that element.
1. div {
2. margin-top: 10px;
3. padding-left: 6px;
4. }
When we wish to identify only one margin or padding value, it is best to use the
longhand properties. Doing so keeps our code explicit and helps us to avoid any confusion
down the road. For example, did we really want to set the top , right , and left sides of
the element to have margins of 0 pixels, or did we really only want to set the bottom mar-
gin to 10 pixels? Using longhand properties and values here helps to make our intentions
clear. When dealing with three or more values, though, shorthand is incredibly helpful.
Margin & Padding Colors
The margin and padding properties are completely transparent and do not ac-
cept any color values. Being transparent, though, they show the background col-
ors of relative elements. For margins, we see the background color of the parent
element, and for padding, we see the background color of the element the pad-
ding is applied to.
Search WWH ::

Custom Search