The padding-left value is applied at the start of the inline element, while
padding-right is applied at the end of the inline element. If the element is split
over two or more line boxes, the right padding wraps to the next line with the
element. It doesn??™t apply padding to the start and end of each single line, as is the
case with block-level elements. See Inline Formatting (p. 166) for more information.
SPEC
version initial inherited
CSS1, 2.1 0 NO
BROWSER SUPPORT
Op9.2+ Saf1.3+ FF1+ IE6+
FULL FULL FULL FULL
219 Box Properties
Value
The property takes a CSS length (px, pt, em, and so on) or a percentage of the width
of the element??™s containing block (p. 147). Note that even for top and bottom padding
the percentage value will refer to the width of the containing block. Negative length
values are not allowed.
Consider the following example:
.outer {
width: 600px;
height: 100px;
background: blue;
}
.outer p {
width: 300px;
padding: 10% 0;
background: red;
height: 80%
}
You may have expected the total height of the paragraph to add up to 100 pixels
because 80% (height) + 10% (top padding) + 10% (bottom padding) = 100%.
Pages:
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335