CHAPTER 6 ■ BOX MODELS PROPERTIESPadding
Problem You want to use padding on one or more of the sides of an element.^
Solution Use a selector to assign the padding property to an element. You can independently set
padding-left, padding-right, padding-top, and padding-bottom. padding affects the
position of an element differently depending on the type of element and its alignment.
The element’s background is displayed in the padding area. padding:0 is the default.
Padding works almost identically to borders:
Padding works like margins and borders in the way it changes the position of an
element and the position of its neighbors.
Like borders, top and bottom padding on inline elements overlap neighboring lines
unless you increase the line height to make room for them.
Like borders, padding doesn’t add to the size of shrinkwrapped or sized tables, and
applying padding to the cells of a stretched table doesn’t cause the table to overflow its
container.
The remaining descriptions in the Border and Margin design patterns apply to Padding
except as follows:
Borders are transparent to the element’s background. Contrast this with margins,
which are transparent to the parent’s background, and borders, which are styled.
Padding can’t be negative because it’s inside the border.
Padding doesn’t apply to tables, but it does apply to table cells. The example applies
padding to the cells in the table rather than to the table.
Padding defaults to 0 , which is no padding.
Pattern -SELECTOR { padding: +WIDTH;
padding: 0;
padding: +VERTICAL +HORIZONTAL;
padding: +TOP +RIGHT +BOTTOM +LEFT;
padding-left: +WIDTH;
padding-right: +WIDTH;
padding-top: +WIDTH;
padding-bottom: +WIDTH; }
Location This design pattern applies to all elements.
Tips Margins and borders share the same shortcut notation. You can set all four margins and
borders using one width; you can set the vertical and horizontal using two widths; or
you can set the four individual sides using four widths. The four sides start with the top
and move clockwise around the box to the right, bottom, and left.
Related to Margin, Border; all Box Model patterns in Chapter 4; Highlight, Text Decoration
(Chapter 10); Spacing, Padded Content, Inline Decoration (Chapter 11); Hanging
Indent (Chapter 12); Lists, Background Bulleted (Chapter 13); Basic Shadowed Image
(Chapter 14); Outside-in Box (Chapter 17)