CSS Attributes Index   Box Attributes

---

Sets or retrieves how much space to insert between the object’s border and content.

CSS	{ padding: [ length | percentage ] {1,4}}
Script	object.style.padding = length | percentage

length	Floating-point number and a valid CSS length unit: either an absolute units designator ( cm, mm, in, pt, pc, or px ) or a relative units designator ( em or ex ).
percentage	Value expressed as a percentage of the parent object’s width.

The property is read/write with a default value of 0; this attribute is not inherited.

Padding describes how much space to insert between the object and its margin or, if there is a border, between the object and its border.

This is a composite property. The {1,4} in the syntax above means that up to four padding values can be specified in this order: top, right, bottom, left.

If one width is supplied, it is used for all four sides. If two widths are supplied, the first is used for the top and bottom borders, and the second is used for left and right borders.

If three widths are supplied, they are used for top, right and left, and bottom borders, respectively. Negative values are not allowed.

The following example demonstrates use of the shorthand padding attribute to change the spacing around an element in relation to its immediate container object.

 Show me 

The following examples demonstrate use of inline event handlers to dynamically set the space between an element’s content and its border. Both methods yield the same effect.

The sample below defines padding style attributes in an embedded stylesheet, and invokes calls to the stylesheet in response to mouse events.

<style type="text/css">
<!--
   td { padding: 3pt }
   .padded { padding: 15pt }
-->
</style>
. . .
<table>
<tr>
   <td onmouseover="this.className='padded'" onmouseout="this.className=''">
      <img src="../shared/images/filtwiz.jpg">
   </td>
</tr>
</table>

 Show me 

The sample below uses inline event handlers to dynamically set an object’s padding in response to mouse events.

<table>
<tr>
   <td onclick="this.style.padding='5mm 8mm'" ondblclick="this.style.padding=''">
      <img src="../shared/images/samp10.jpg">
   </td>
</tr>
</table>

 Show me 

BODY, BUTTON, CAPTION, currentStyle, DIV, HTMLAREA, IFRAME, IMG, ISINDEX, MARQUEE, runtimeStyle, style, TABLE, TD, TEXTAREA, TR

margin, padding-bottom, padding-left, padding-right, padding-top