CSS padding

Also see the full, alphabetical list of CSS properties

The CSS padding property is CSS shorthand for specifying padding on all sides of an element. In other words, it is shorthand property for setting padding-top, padding-right, padding-bottom, and padding-left all at once.

You could think of it as the CSS equivalent to cellpadding in HTML, however, CSS padding is more powerful - it can be applied to any element, not just table cells. Also, you can apply different padding values to each side of an element.

Syntax:	padding: <value1> <value2> <value3> <value4>;
Possible Values:	<padding-width> - specify one value to apply padding to all sides or specify one for each side. inherit
Initial Value:	Not defined
Applies to:	All elements.
Inherited:	No
Media:	Visual
Example:	padding:10px; All four sides have padding of 10 pixels. padding:10px 20px; Top and bottom have padding of 10 pixels. Right and left have padding of 20 pixels. padding:10px 20px 30px; Top is 10px Left and right are 20px Bottom is 30px padding:10px 20px 30px 40px; Top is 10px Right is 20px Bottom is 30px Left is 40px
Try it yourself!	<style type="text/css"> td { width:50%; border:1 solid black; } td.padded { padding:20px; } </style> <table> <tr> <td class="padded">This cell is styled using the CSS padding property - kind of the CSS equivalent of cellpadding in HTML. Try changing the values to see the effect it has on the padding of the cell.</td></tr> <tr><td>This cell is NOT styled using the CSS padding property.</td> </tr></table>

Also see padding-top, padding-right, padding-bottom and padding-left.

Also see all CSS properties listed alphabetically