HTML and CSS Reference
In-Depth Information
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