HTML and CSS Reference
In-Depth Information
Table 4-1. Vendor prexes
Prefix
Browser vendor
-moz-
Firefox
-webkit-
Chrome, Safari
-o-
Opera
-ms-
Internet Explorer
You can't blindly assume that all vendor-prefixed properties have the same name as the standard property,
with the prefix added, although that is true most of the time. Here is a good article that lists many of the vendor-
specific properties: http://peter.sh/experiments/vendor-prefixed-css-property-overview
you should always list the standard property last so it will override the vendor-specific version. some
browsers will support both and, while most of the time the implementation is identical, sometimes the vendor-specific
version behaves differently.
Caution
Understanding the Box Model
Each element in the document takes up a certain amount of space, which depends on the content of that
element. In addition, factors such as padding and margin affect this as well. Padding is the space between the
content and the element's border. The margin is the space between the border and adjacent elements. This is
illustrated in Figure 4-1 .
Margin
Padding
Content
Border
Figure 4-1. he box model
You can specify the margin with the margin declaration and specify the values either in pixels or as a % of
the page size. You can specify the top, right, bottom, and left margin individually using the margin-top , margin-
right , margin-bottom , and margin-left declarations or with the margin declaration specifying all four values (in
that order - top, right, bottom, and left). You can also use the margin declaration with a single value, which will
setall four margins to this value. You set the padding property the same way using the padding declaration.
When determining the space used, remember to include the border width as well. For example, if the
padding is set to 10px, the margin set to 5px and the border-width set to 3px, the space used (in addition to the
actual element content) will be (2 * 10) + (2 * 5) + (2 * 3) = 36px.
 
Search WWH ::




Custom Search