A.4. Padding, Borders, and MarginsThe following properties control the space around an element, and let you add border lines to a style. A.4.1. borderDraws a line around the four edges of an element.
A.4.2. border-top, border-right, border-bottom, border-leftAdds a border to a single edge. For example, border-top adds a border to the top of the element.
A.4.3. border-colorDefines the color used for all four borders.
A.4.4. border-top-color, border-right-color, border-bottom-color, border-left-colorFunctions just like the border-color property but sets color for only one edge. Use these properties to override the color set by the border property. In this way, you can customize the color for an individual edge while using a more generic border style to define the basic size and style of all four edges.
A.4.5. border-styleDefines the style used for all four borders.
A.4.6. border-top-style, border-right-style, border-bottom-style, border-left-styleFunctions just like the border-style property, but applies only to one edge.
A.4.7. border-widthDefines the width or thickness of the line used to draw all four borders.
A.4.8. border-top-width, border-right-width, border-bottom-width, border-left-widthFunctions just like the border-width property but applies only to one edge.
A.4.9. outlineThis property is a shorthand way to combine outline-color, outline-style , and out-line-width (listed next ). An outline works just like a border, except the outline takes up no space (that is, it doesn't add to the width or height of an element), and it applies to all four edges. It's intended more as a way of highlighting something on a page than as a design detail. Outline works in Firefox, Safari, and Opera, but not in Internet Explorer.
A.4.10. outline-colorSpecifies the color for an outline (see outline above).
A.4.11. outline-styleSpecifies the type of line for the outline dotted, solid, dashed, and so on.
A.4.12. outline-widthSpecifies the thickness of the outline. Works just like border-width (Section A.1.1).
A.4.13. paddingSets the amount of space between the content and border and edge of the background. Use it to add empty space around text, images, or other content. (See Figure 7-1 in Section 7.2 for an illustration.)
A.4.14. padding-topWorks just like the padding property, but sets padding for top edge only.
A.4.15. padding-rightWorks just like the padding property, but sets padding for right edge only.
A.4.16. padding-bottomWorks just like the padding property, but sets padding for bottom edge only.
A.4.17. padding-leftWorks just like the padding property, but sets padding for left edge only.
A.4.18. marginSets the amount of space between an element's border and the margin of other elements (see Figure 7-1 in Section 7.2). It lets you add white space between two elementsbetween one picture and another picture, or between a sidebar and the main content area of a page. Note: Vertical margins between elements can collapse . That is, browsers use only the top or bottom margin and ignore the other, creating a smaller gap than expected (see Section 7.2.2).
A.4.19. margin-topWorks just like the margin property, but sets margin for top edge only.
A.4.20. margin-rightWorks just like the margin property, but sets margin for right edge only.
A.4.21. margin-bottomWorks just like the margin property, but sets margin for bottom edge only.
A.4.22. margin-leftWorks just like the margin property, but sets margin for left edge only.
|