Monday, October 11, 2010

CSS Padding

Padding defines the space between the element's border and its content. CSS padding is specified just like margins - they can be set individually for each side, or all sides at once.

Padding on all Sides
This example uses the padding property to set padding on all sides of an element.
<p style="border:2px solid red;padding:10px;">
This text has padding of 10 pixels on all four sides.
</p>


This results in:
This text has padding of 10 pixels on all four sides.

You can also declare all the padding of an element in a single property as follows:
padding: 10px 10px 10px 10px;
If you declare all 4 values as I have above, the order is as follows:
  1. top
  2. right
  3. bottom
  4. left
Example:
<p style="border:1px solid red;padding-left:30px;">This text has left padding of 30 pixels.</p>

This result in
This text has left padding of 30 pixels.

No comments:

Post a Comment