Quackit Logo

FREE Hosting!

With every domain name you register with ZappyHost, you get FREE hosting.

$1.99 Domain Names

With every new non-domain purchase thru ZappyHost, you get a domain name for only $1.99.

CSS Padding

Print Version

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.

Setting Padding on all Sides

<p style="border:1px solid orange;padding:20px;">
This text has padding of 20 pixels on all four sides.
</p>

This results in:

This text has padding of 20 pixels on all four sides.

Setting Padding for Each Side

If you don't want the padding settings to be applied to all four sides, or if you want each side to have different padding, you can use the following properties:

  • padding-bottom
  • padding-left
  • padding-right
  • padding-top

Example:

<p style="border:1px solid orange;padding-left:60px;">This text has left padding of 60 pixels.</p>

This results in:

This text has left padding of 60 pixels.

Enjoy this website?

  1. Link to this page (copy/paste into your own website or blog):
  2. Add this page to your favorite social bookmarks sites:
               
  3. Add this page to your Favorites

Oh, and thank you for supporting Quackit!