Section A.4. Padding, Borders, and Margins

A.4. Padding, Borders, and Margins

The following properties control the space around an element, and let you add border lines to a style.

A.4.1. border

Draws a line around the four edges of an element.

• Values : The width ( thickness ) of the border line in any valid CSS measurement unit (except percentages).

  You can also specify a style for the line: solid, dotted , dashed, double, groove, ridge, inset, outset, none, and hidden . (See Figure 7-7 in Section 7.3 for an illustration of the different styles.) The none and hidden values do the same thingremove any border.

  Finally, you can specify a color using any valid CSS color type (a keyword like green or a hex number like #33fc44 ).

• Example : border: 2px solid #f33 ;

A.4.2. border-top, border-right, border-bottom, border-left

Adds a border to a single edge. For example, border-top adds a border to the top of the element.

• Values : same as for border .

• Example : border-left: 1em dashed red ;

A.4.3. border-color

Defines the color used for all four borders.

• Values : Any valid CSS color type (a keyword like green or a hex number like # 33fc44 ).

• Example : border-color: rgb(255,34,100 );

A.4.4. border-top-color, border-right-color, border-bottom-color, border-left-color

Functions 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.

• Values : see border-color above.

• Example : border-left-color: #333 ;

A.4.5. border-style

Defines the style used for all four borders.

• Values : One of these key words: solid, dotted, dashed, double, groove, ridge, inset, outset, none , and hidden . See Figure 7-7 in Section 7.3 for an illustration of the different styles. The none and hidden values act identicallythey remove any border.

• Example : border-style: inset ;

A.4.6. border-top-style, border-right-style, border-bottom-style, border-left-style

Functions just like the border-style property, but applies only to one edge.

• Values : see border-style above.

• Example : border-top-style: none ;

A.4.7. border-width

Defines the width or thickness of the line used to draw all four borders.

• Values : Any valid CSS measurement unit except percentages. The most common are ems and pixels.

• Example : border-width: 1px ;

A.4.8. border-top-width, border-right-width, border-bottom-width, border-left-width

Functions just like the border-width property but applies only to one edge.

• Values : see border-width above.

• Example : border-bottom-width: 3em ;

A.4.9. outline

This 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.

• Values : The same as for border with one exceptionsee outline-color next.

• Example : outline: 3px solid #F33 ;

A.4.10. outline-color

Specifies the color for an outline (see outline above).

• Values : Any valid CSS color, plus the value invert , which merely reverses the color the outline is sitting on. If the outline is drawn on a white background, the invert value makes the outline black. Works just like border-color (Section A.1.1).

• Example : outline-color: invert ;

A.4.11. outline-style

Specifies the type of line for the outline dotted, solid, dashed, and so on.

• Values : Same as border-style (Section A.1.1).

• Example : outline-style: dashed ;

A.4.12. outline-width

Specifies the thickness of the outline. Works just like border-width (Section A.1.1).

• Values : Any valid CSS measurement unit except percentages. The most common are ems and pixels.

• Example : outline-width: 3px ;

A.4.13. padding

Sets 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.)

• Values : Any valid CSS measurement unit, like pixels or ems. Percentage values are based on the width of the containing element. A headline that's a child of the <body> tag uses the width of the browser window to calculate a percentage value, so a padding of 20 percent adds 20 percent of the window's width. If the visitor resizes his browser, the padding size changes proportionately. You can specify the padding for all four edges by using a single value, or set individual padding sizes per edge using this order: top, right, bottom, left .

• Examples: padding: 20px; padding: 2em 3em 2.5em 0 ;

A.4.14. padding-top

Works just like the padding property, but sets padding for top edge only.

• Example : padding-top: 20px;

A.4.15. padding-right

Works just like the padding property, but sets padding for right edge only.

• Example : padding-right: 20px ;

A.4.16. padding-bottom

Works just like the padding property, but sets padding for bottom edge only.

• Example : padding-bottom: 20px ;

A.4.17. padding-left

Works just like the padding property, but sets padding for left edge only.

• Example : padding-left: 20px ;

A.4.18. margin

Sets 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).

---

• Values : Any valid CSS measurement unit like pixels or ems. Percentage values are based on the width of the containing element. A headline that's a child of the body tag uses the width of the browser window to calculate a percentage value, so a margin of 10 percent adds 10 percent of the window's width to the edges of the headline. If the visitor resizes his browser, the margin size changes. As with padding, you specify the margin for all four edges using a single value, or set individual margins in this order: top, right, bottom, left .

• Examples : margin: 20px; margin: 2em 3em 2.5em 0 ;

A.4.19. margin-top

Works just like the margin property, but sets margin for top edge only.

• Example : margin-top: 20px ;

A.4.20. margin-right

Works just like the margin property, but sets margin for right edge only.

• Example : margin-right: 20px ;

A.4.21. margin-bottom

Works just like the margin property, but sets margin for bottom edge only.

• Example : margin-bottom: 20px ;

A.4.22. margin-left

Works just like the margin property, but sets margin for left edge only.

• Example : margin-left: 20px ;